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CREATE TEMPLATES • CODE FUNCTIONS • EDIT STYLESHEETS 


How to craft 
these effects 
in Photoshop 


Adapt your site for 
desktop, tablet and 
mobile devices 


• Create 3D navigation 
with Meny.js 

• Make a web app with 
Groovy & Grails 

• Build a retro web banner 


Build page 
furniture with 
CSS & jQuery 


Debug your way to a 
faster, more secure site 
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The UK's most advanced 

RESELLER HOSTING 




Increase your income and develop 
long lasting relationships with your 
clients. 



100% YOUR BRAND 

Customise every aspect of your reseller 
hosting with fully white label features 



CREATE CUSTOM PLANS 

Control everything from web space and 
bandwidth to prices and features 



UNLIMITED EVERYTHING 

Unlimited web space and bandwidth to 
let you host as many sites as you want 


« „ CUSTOMER SUPPORT 

100% UK Support, 24 hours a day from 
our in-house customer support team 


YOUR CLIENTS DESERVE 

GREAT HOSTING 


Our award-winning Reseller 
Hosting package has been 
developed for web designers, 
developers, freelancers, agencies 
and web professionals to provide 
clients with high performance, 
stable and secure hosting. 



EXCLUSIVE RESELLER DISCOUNTS 


25% 

OFF 

Dedicated Servers, 

VPS and SSL Certificates 

50% 

OFF 

Hosted Exchange 
and Premium Email 


30% 

OFF 

Bulk Domain Names 



From 

only 


£29 


.99 per month 


V FREE & INSTANT SETUP V NO HIDDEN FEES 

V EXCLUSIVE RESELLER DISCOUNTS 

can us now 0845 644 7750 

Find out more www.heartinternet.co.uk/reseller-hosting 

Prices exclude VAT. 

# heart internet 

www.heartinternet.co.uk 

Web hosting 1 Reseller hosting I VPS Servers 














Welcome 
to the issue 


rHE WEB DESIGNER MISSION 


Ml To be the most accessible and 
inspiring voice for the industry, 
offering cutting-edge features 
and techniques vital to 
building future-proof i Russell 
online content ill! 



Highlight 



## The first version 
of their website was 
passable at best. 
Zensorium needed 
to clean up its online 
identity. 

Kilo’s creative director, Benjy 
Choo talking about their latest 
project Tinke. 

Page 26 


WordPress themes? We’ve got it all sewn up... 


elcome to the latest issue of Web 
Designer magazine. This WordPress 
:::::: is a bit great isn’t it? Its LEGO-like 
' ? : modularity makes it easy to mix, 

::: :::::::::: match and build various elements 

together to create something new 
with every project. There’s always a 
new facet to explore and a new 
extension to exploit, but we’ve gone well out of the way 
to doing things a little differently this issue. 

While we usually make the most of the various 
pre-manufactured blocks, this time we’re turning the 
concept right on its head by showing you how to 
construct your own, completely bespoke, WordPress 


theme from the ground up. There’s no better way to 
master its inner workings and no better way to ensure 
your next project truly stands out from the crowd. Get 
started today by heading straight to page 38 for our 
ten-page feature. 

Elsewhere this month we take a short trip up the 
motorway to visit the digital superstars of Bartle Bogle 
Hegarty. The globally recognised agency reveals how it 
created the celebrated Audio tagline, Vorsprung durch 
Technik, and kickstarted a long-standing campaign of 
cool for Levi’s jeans with its Launderette campaign. BBH 
also offers incredible insight into its workings, and we 
take a look at its latest projects, starting on page 30. 
Russell Barnes 


INIWordPress’s 
modularity makes 
it easy to mix, 
match and build 
elements I# 


Follow us on Twitter for all the news & conversation @WebDesignerMag 
Visit our blog for opinion, freebies & more® www.webdesignermag.co.uk 
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Excitographic 

Plotting the features that got us 
in a frenzy over the month... 

^ Steve Jenkins, Features Editor 
Russell Barnes, Editor 
A Daniel Duke, Designer 
A Ben Martin, Sub Editor 


Turn over to the contents to 
discover what’s going to get you 
excited this issue... 
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This issue’s panel of experts 


Welcome to that 
bit of the mag 
where we learn 
more about the 
featured writers 
and contributors. 


Create the 

component parts and 
put together a bespoke 
WordPresssite 



Known as TDH for short Thord is an author, web designer and WordPress 
expert. This issue he reveals the art of a building a custom WordPress 
theme from start to finish. Discover how to create the component parts 
and put together a bespoke WordPress site. Page 38 




Louis Lazaris 



Sam Hampton-Smith 



Mark Shufflebottom is the 
programme leader of BA 
(Hons) Digital Media Design 
at Bournemouth University 
and an Adobe Education 
Leader. In this issue he 
demonstrates how to take 
an existing site and make it 
responsive. Page 70 



Louis is an author and 
front-end developer living in 
Canada. He writes for a 
number of design blogs, 
including his own site. 
Impressive Webs. This issue 
he shows us how to build a 
classic content slider with 
jQuery and CSS3. Page 48 



A keen supporter of web 
standards, Sam loves 
getting the most out of 
HTML and CSS. This issue 
he reveals the secrets 
behind creating a clever 
and imaginative 3D 
navigation system using 
CSS3 and Meny.js. Page 58 


Pete Simmons Adam Smith Matt Gifford 



Pete is a Digital Marketing 
Manager for Lionhead 
Studios in Guildford. Pete 
also specialises in front-end 
development, PHP and 
social APIs. This issues he 
shows how to capture video 
from a webcam using 
HTML5. Page 54 



Adam is the resident 
Photoshop expert on our 
sister publication Advanced 
Photoshop. This issue he 
uses his vast knowledge to 
unveil the secrets and 
technigues behind creating 
the stitch effect found on this 
issue's cover. Page 64 



Matt Gifford is a lead RIA 
consultant developer and 
industry author from 
Cambridge, who specialises 
in ColdFusion and AIR 
development. This issue 
sees him add authentication 
and security to the Grails 
app built in part 1. Page 88 


Louis Simoneau 


Louis slings Ruby on Rails 
for Flippa, and hosts the 
SitePoint podcast for 
designers and developers. 
This issue he returns to Web 
Designer and reveals how 
• to tune up your website with 
Google Chrome’s Developer 
tools. Page 84 


Tim Stone 


t Tim Stone is a front-end 
developer who graduated 
from Bournemouth 
University with a 1st class 
degree in Interactive Media 
Production. In this issue he 
looks at Deferred objects in 
jQuery with the aid of some 
scaly reptiles. Page 92 
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web skills? 


We’re always looking for the 
hottest web-design talent. Email 
webdesigner@imagine-publishing.co.uk 
with examples of your creative work 
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This year’s must have tech included FREE! 


Until the end of 2012, purchase any* Dedicated Server from Webfusion and you will be the proud owner 
of the technological marvel that is the Raspberry Pi. Our dedicated servers give you the control and 
reliability you need for your internet presence. 

Core dedicated server features: 

• Up to 2x Intel Xeon E5640 2.66GHz CPU’s • Unmetered data transfer 

• Up to 32GB RAM • FREE Plesk 11 control panel included 

• Up to 4 SATA or SAS hard drives • Managed and Self-managed options 


From £119.99 per month 

CALL SALES NOW on 0808163 4509 or visit www.webfusion.co.uk/Pi 


Powered by 
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Raspberry Pi is a trademark of the Raspberry Pi Foundation. 



webfusion 


You. The web. Connected. 


‘Limit of one Raspberry Pi per customer. Quoted prices are correct as of the date of publication. All prices are exclusive of VAT and are subject to change. Terms and conditions apply. 










Cutting-edge features, techniques and inspiration for web creatives 


Chat with the team and other readers and discuss the latest tech, trends and techniques. Here’s how to stay in touch... 

0webdesigner@imagine-publishing.co.uk 0 @WebDesignerMag ©www.webdesignermag.co.uk 


Inside... 

20 Lightbox 

Three sites that make the web that bit better 

26 Design diary: Tinke 

Product developer. Zensorium, turns to Kilo to 
help launch its latest health gadget, Tinke 

30 Pro file: Bartle Bogle Hegarty 

This month we venture inside the celebrated 
Vorsprung durch Technik creator’s HQ 

36 Blog beautiful 

Six sumptuous blogs by fashionistas 

Cover: Tailor your own 
WordPress theme 

Build a bespoke look for your site by building 
your own WP theme from start to finish 

80 Design cloud 

24 sites with fantastic footers 

96 Portfolio 

Three more rising stars in the web world 

100 Trend map 

This month we travel East to Hong Kong 

114 Style relic: McLaren 

Has their web tech stayed on the pace? 
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Discussing the hottest topics 
from the web design world 

8 Do you suffer from web envy? 

According to Decibel Technology’s research 
you’re jealous of your competitors - here’s why... 

10 Get running at full capacity 

Easily distracted? Facebook hogging your 
time? Stop slacking and maximise your talents! 

14 Crowdsource 

We respond to your latest letters and tweets 

16 Comment: Dries Van haver 

We should be striving for nothing less than 
perfection - it’s all it takes to succeed... 

18 Comment: Richard Miller 

Sensio Labs UK’s Richard Miller thinks it’s time 
to realise the potential of Symfony2 





Pro file: Bartle Bogle Hegarty 

We talk to the global sensation behind Audi and Levi’s 
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Lightbox: Lambooja 

This month’s site of the month is a retro-styled treat 



Design Diary: Tinke 

Kilo shows us how they attacked their latest project 
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miss an issue 

Subscribe 

Turn to page 102 now. 

USA readers turn to 
page 99 for an 
exclusive offer 


Feature 

Tune up your website 

Debug performance problems with Chrome’s 
JavaScript developer tools 

88 Build a web app with 
Groovy & Grails part 2 

Add authentication and security roles to your 
application in the final part of our guide 
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Make a JavaScript app with 
Deferred objects 

Find out how to use Deferred objects and how they 
can improve your next project 


78 Craft a retro feel with 
Photoshop 

Adam Smith uses 
www.castirondesign.com 
to demonstrate retro-cool 
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112 Discover what your latest disc has to offer 

A comprehensive collection 
of free designer resources! 

• 200+ minutes of pro video tutorials 

• 6 contemporary fonts 

• 35 Guilloche vectors 

• 26 Mellow Mess textures 
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Web gurus take you step-by-step 
through professional techniques 


Don’t get stitched up 

Learn how to sew in Photoshop 


Web workshop 


Get responsive! 

Make your site responsive in easy steps 


76 Create a sliding side 
panel with HTML& 
jQuery 

Mark Shufflebottom shows us 
how www.dujour.com 
achieves its luxury and 
lifestyle look with a smattering 
of HTML and jQuery code 
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Dynamic updates 

Stay fresh with this content switcher 


Build a news content switcher 

Create dynamic updates with jQuery and CSS3 


Capture webcam video 

Use JavaScript & HTML5 to grab footage without 
third-party applications or Flash components 


Create a site with 3D CSS 
navigation using Meny.js 

Impress your visitors with clever 3D effects 


Create stitched effects on your site 

Harness the power of Photoshop to create authentic 
looking stitch textures and effects 


Add an extra dimension 

3D CSS navigation using Meny.js 


Make your pixel-based 
site responsive 

It only takes a sprinkling of CSS to turn an existing site 
an ultra-modern responsive design 


Adaptive Screen Layout 
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Discussing the hottest topics in the web design world 

If you have a creative project new web product or great designer story, contact the editorial desk 

0webdesigner@imagine-publishing.co.uk 0 @WebDesignerMag 



Do you 
suffer from 


web envy? 


How good is your website and are 
you envious of others? According to 
a survey from Decibel Technology 
the answer is yes. But why? 


Ben Frails 


Website: benfrai n . c , 


A ccording to figures released 
from Royal Pingdom (www. 
pingdom.com), at the end of 
2011 the number of websites had hit a 
staggering 170 million. That’s roughly 
one site for every 40 people on earth. 

It might be hard to imagine such a 
massive number, but it’s even harder to 
imagine that even one per cent of these 
are worthy of a view. Web design is a 
subjective and emotive persuasion, and 
design plays a huge part in the success 
of any site. Admittedly, a successful site 
is not based on the aesthetic alone - 
functionality and load times play a key 
role, but it is the aesthetic that draws the 
viewer to investigate further. A site 
needs to be inviting and attractive to 
tempt users to spend their precious 
bandwidth on a specific site. 

Web designers will know better than 
most how many hours go into a design. 
By their very nature, most designers are 
perfectionists and are rarely completely 
happy with a finished project. Time and 


budget can play a big part in the 
outcome of a project, but compromise is 
another major factor in the end result. 
Single-person projects offer less 
compromise, but the outcome can still 
be the same: web envy. 

The constant viewing of a design as a 
project progresses can mean that the 
initial excitement is easily lost come the 
end of the project. There is often a brief 
honeymoon period where a site design 
is admired and adored, but it doesn’t 
take long for the designer or designers 
to start thinking of tweaks and 
improvements they want to make. A 
look across the web will soon reveal the 
extent of how envious many designers 
are of other sites. 

A recent survey from Decibel 
revealed that over a third of website 
owners thought that a competitor’s site 
was better. Nearly 50 per cent of those 
surveyed suggested they would not do 
business with a site that was out-of-date 
and was hard to navigate. This 


immediately suggests two things. First, 
the design is important. Second, so is 
the user experience. 

So, is web envy a good thing and 
what does it achieve? Web envy can 
undoubtedly have a positive effect. 
Designers, technical staff and even 
non-technical staff can all have an input. 
The web is awash with great examples 
of websites that work. Everyone has a 
favourite, but what is it that makes a site 
a favourite. It is the layout, design, fonts 
or features? Or maybe it’s the site’s 
functionality or user experience? 
Whatever it is, the designer has to 
ensure that all the elements are thrown 
into the mix and evaluated accordingly. 

As the design process takes off the 
website will start to take shape. Along 
the way decisions will be made that will 
reshape the original brief, but who gets 
to make these decisions? If it’s a single 
person, they will believe in what they are 
implementing, but will the rest of the 
company/business? Who gets to make 


the decision, senior management? The 
web designer? If it’s a committee-based 
affair, then decisions will be based on a 
vote. Will this be unanimous? That’s 
highly unlikely, which instantly means 
that certain committee members will 
not be happy with the outcome, leading 
to web envy yet again. 

There is no single answer to a 
successful site-building process. Human 
nature dictates that people will have 
different opinions. There is no doubt that 
features will get left out, functionality will 
get left out and web envy will rear its 
head again. The only answer is to use it 
in a positive manner and make sure that 
it doesn’t affect business. 

"■- Mh 
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The inspirational SimpleBits site 
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news 


How good is 
your website? 


Design is a subjective 
and emotive issue, 
but the reasons for a 
rebuild still remain 
very much the same 




51 % 


think a company’s 
website influences their 
opinion of an organisation 


consider not doing 
business with a company 
that has an out-of-date or 
hard to navigate website 


don’t actually think 
their own company 
website represents 
their brand 


38 % 

would be put off working 
for a company with a 
poor web presence 

37 % 

think their closest 
competitor’s company 
website is better than 
their own 


Reasons for rebuilding 

32 % 38 % 

Change of 
focus in the 
organisation 


37 % 


rebranding 

exercise 




Source: provided by Decibel technology (www.decibeltechnology.com) 


Your Tweets 

Web Designer posed the question ‘What, 
or who, inspired the design and style of 
your website? What sites do you aspire to? 


@hatchpb 


@MichaelRumsby 


^ @WebD es ign er Mag 

instagram is a hub ™ 

@WebDesignerMag 
* 1 was inspired by the 

for inspiration for 

simplicity, usability. 

me, 1 love @sam_ 

and intuitiveness of 

woods12, who was 

the Twitter mobile 

the inspiration 

app. From there our 

behind my recent 
redesign. 

team inspires me 


COMMENT 

Ben Harris 

Managing director at Decibel Technology 


“Web envy is great if it inspires 
j _ businesses to act faster at 

■ improving their web presence. Our study 

shows people are going online to validate companies, but that 
the companies are failing at the first hurdle. It’s not that these 
companies don’t understand the value of their web presence - 
but rather that in many cases they just don’t have the CMS tools 
in place to make the changes they need to, and it’s taking over 
half of them at least a year to get the budget approved in order to 
put the right ones in place - so no wonder they’re envious of 
competitors. More companies should recognise at board level 
that websites are fixed assets and treat them as such; that is, to 
put time and investment into generating the maximum return 
on investment from them. Putting software in place that helps 
them squeeze more leads and sales out over a much longer 
period is now the game they should be in. They need to be able 
to grow or evolve their website as a company grows up, not wait 
for it to date and become ineffectual before creating a new one. 
Our message is you that you don’t need to start from scratch 
every time. With the right CMS, you can most certainly keep 
ahead and be the Jones’ - not simply keep up with them. To do 
this the CMS industry must make it easier for businesses to 
navigate the CMS maze. There are lots of variables to consider 
when purchasing a CMS, but the number one thing to remember 
is that you should ensure your CMS investment works 
for your business today - and tomorrow.” 
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COMMENT 

BenFrain 

Front-end web developer and technology writer 

I’ve always been a big fan of Dan 
Cederholm’s work, and I think the 
main navigation on my site shows some 
obvious influence taken from his 
simplebits.com website, particularly the rollover for Home on 
the logo. That implementation was unashamedly lifted from 
his site (sorry Dan)! 

I used to have a big inferiority complex when it came to 
other people’s websites versus my own, and would often 
pore over site inspiration websites and galleries. However, I 
find the older I get, the less I care about that. I’ve just accepted 
that I’m never more than a few clicks away from sites that 
make me feel 'if only I could have made that’. 

I find I’m more impressed now by sites that handle large 
swathes of content and categories gracefully across multiple 
devices and viewports. I think there’s certainly a trend 
toward simplicity in site design for this very reason, and I’m a 
big fan of that. 

I’m only just getting seriously into typefaces, so Id probably 
look at those I’ve used and their relationship to each 
other on my site before anything else.” 
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Discussiiig the hottest topics in the web design world 


Stop slacking 

and get more 
productive 


Are you running at full 
capacity? Do you finish 
projects on time? Are 
you easily distracted? 
Do you spend too much 
time on Twitter and 
Facebook? Here’s a few 
pointers on maximizing 
your time and talents 


I f you are already running at full 
capacity, offering maximum 
productivity, then congratulations 
on your impressive efficiency. 

However, if you are in the more 
common strand running at less than a 
hundred per cent, then there is room to 
increase your productivity and make 
yourself - and where you work - both 
much, much happier. 

Whatever the working environment 
there will be distractions. These can 
come in many guises - colleagues, 
Facebook, Twitter - and need to be dealt 
with accordingly. The first step to 
increased productivity is to block as 
many external distractions as possible. 
This could be as simple as sticking on a 
set of headphones and blotting out the 
noise with some music. 

The next step is far more difficult, 
taking control of yourself. Your 
personality type will dictate to a certain 
degree how efficient and productive you 
are. If you are the type of person that is 
easily distracted and finds it difficult to 
get organised then you are more in 
need of help that your more efficient 
counterparts. Those who are better 
organised will be more productive. Start 
by talking to the more efficient for a few 


tips. Alternatively, have a browse 
through our 10 steps to becoming more 
productive’ boxout. As always, actually 
sticking to a list will help, but what if you 
simply cannot adhere to suggestions? 

Maneesh Sethi took a more extreme 
approach to increase his productivity by 
hiring a girl to slap him each time he got 
off task. He decided that he needed help 
to make him improve productivity. He 
started his campaign by placing an ad 
on craigslist, ‘I’m looking for someone 
who can work next to me at a defined 
location (my house or a mission cafe) 
and will make sure to watch what is 
happening on my screen. When I am 
wasting time, you’ll have to yell at me or 
if need be, slap me.’ 

As ridiculous as the idea may sound, 
and he had to pay them $8 an hour, the 
experiment was a success. Sethi states: 
“My average productivity runs around 
35-40 per cent on most days. When 
Kara sat next to me, my productivity 
skyrocketed to 98 per cent.” 

This is a fascinating insight into how 
to increase productivity, albeit not the 
most conventional approach. Check out 
the whole story, including video at bit.ly/ 
PzRAgH. Perhaps we are about to see a 
whole new job category open up. 


The slap 
experiment 


98% 


35% 


As a method for improving productivity, 
being slapped is probably not the most 
efficient, but it is certainly effective. 
Blogger Maneesh Sethi performed an 
experiment where he employed an 
assistant to slap him to stop wasting time 
on Facebook. A 63% increase in 
productivity is an undoubted success. 



Maneesh Sethi improved his productivity by 98% after hiring a little help 


<news <:loud> 


Bite-sized coverage of the month’s trending topics 

GetreadyforjQuery2.0 - 

According to the official blog, jQuery 1.8 is getting a 
spring clean, jQuery 1.9 is due in early 2013 and 2.0 
will appear not long after that. What’s the difference 
between them? The release of jQuery 2.0 will finally 
see support for IE6/7/8/ removed and look to offer a 
smaller size and better performance. API support will 
be unaffected with 1.9 and 2.0 being interchangeable. 


Square 


\^T"\ Jack Dorsey’s mobile 

payment service launches 
in Canada in its first foray 
outside the US 


HTML5 


jQuery Behance 

^ ^ ^ UlglLdipUl LlUllUb 

iPad Mini Joomia 


Pantone Canvas, powered 
by Behance, lets designers 
showcase and promote 
their work through their 
digital portfolios 


a 


The not-quite-seven inch iPad is finally here, to 
a lukewarm reception 


The latest release goes responsive with 
the help of Bootstrap 


New Office Web 
Apps built with 
HTML5 


Microsoft has re-engineered its 
Office Web Apps, building them 
in HTML5 to offer better 
browser compatibility. The new 
apps have been fine-tuned to 
work correctly with IE10, 
Windows 8 and iOS 6. The new 
apps will be available through 
SkyDrive and outlook.com. 
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10 steps to becoming 
more productive 

A few commonsense suggestions will help ensure 
that your days are far more productive 


Just start 

There is no point in avoiding a 
task that has to be completed. Stop 
wasting time and get started on a task as 
quickly as possible. 

Get organised 
Organise everything. Getting 
organised will immediately help your 
productivity. Ensure that you have all the 
tools you need for a task before getting 
started. Organise your files and folders in 
to a logical, easy to follow order and 
make sure files are named for easy 
referencing at a later date. 

Make a list 

This is a simple but effective 
method. Write down all the task that 
need to be achieved. This can be for the 
day week or even month if you are 
feeling particularly adventurous. Logically, 
stick with the day ahead. 

Prioritise tasks 
Making a list will help realise what 
tasks have to be achieved. However, as with 
all tasks some will need to be completed 
before others. Arrange tasks so that the 
most pressing is completed first. 

Start with the hardest 
This follows on from making a list 
and prioritising tasks. If certain tasks have 
the same priority, then you should start 
with the task you deem to be the most 
difficult. Once this is completed, the tasks 
will get progressively easier and you will 
become more productive. 


Remove distractions 

There is no doubt that distractions 
will ruin productivity. This could be a 
talkative colleague, social media outlets 
or general office noise. Stick on a pair of 
headphones and listen to your favourite 
music to keep focused, and only use the 
Web for research. 

Set time limits 

A task should only take a certain 
length of time. Allocate a time period to a 
task and stick to it as best as you can. Be 
realistic when setting a time limit. Too 
short a time will be counter-productive. 
Breakdown tasks 
If you have a mammoth or 
daunting task on your hands, don’t panic. 
Break it down into logical and smaller 
sub-sections and start at the beginning. If 
necessary, breakdown the sub-sections 
into smaller chunks as well. 

Learn keyboard shortcuts 
This is more of a practical tip, but 
one that will help improve productivity 
no end. Learn as many shortcuts as you 
can, start with the more obvious, and 
remove the hassle and time-killing task of 
opening endless menus. 

Don’t multitask 
Research has shown that 
multitasking is less productive. Constant 
Interruptions will break your 
concentration and disrupt your 
workflow making it more difficult to 
restart a task. 


Go digital at the 
Imagine superstore 

Get Web Designer on your favourite digital 
platform. Visit Imagine Publishing’s supersite 

greatdigitalmags.com now 

Imagine Publishing’s new partnership with Zinio 
means that Web Designer is now available for PC, 

Mac, iPad, iPhone, Android, Blackberry and Web OS. 

You can now get Web Designer wherever you are 
and take it with you. Read all the latest cutting-edge 
practical projects, features, interviews and 
inspirational design showcases in your favoured 
digital format 

Zinio provides the apps (gb.zinio.com/apps/ 
index.jsp) needed to get the best on-screen reading 
experience, while Web Designer provides the 
unmissable content. 



10 keyboard shortcuts 

Memorise this quick collection of Mac shortcuts for 
increased efficiency 









Copy 


Paste 


Save 


Take full screenshot 


Select area to screenshot 


New folder 


Rename selected file 


Return I ^ ~~l 


Eject disc 


Force quit unresponsive apps 


\"l«c 


Show view options 



trade secret 

no Lt n. £c} - tried si krtht - A secret formula, method, or device that gives one an advantage over competitors. 

Low cost address lookup for your website 


Buy Online from £1S + 
Eliminate sptHingrri stakes 
Reduced abanctaned carts 


fiCfc. reduction of keystrokes entering address 
Create a professional image for your clients 
Simple integration with SDK & working examples 


For more details visit postcode-softwa re. n et or call 084583 82 666 































1&1 WEB HOSTING 


✓ 


GEO-REDUNDANCY FOR MAXIMUM RELIABILITY 


✓ 


RESTORE DATA WITH 1&1 WEBSPACE RECOVERY 


This tool allows you to recover website data that 
you have accidentally deleted, with a simple click 
of your mouse. The 1&1 Webspace Recovery tool is 
easy to use through the 1&1 Control Panel. 


MAXIMUM SECURITY AND MAXIMUM PERFORMANCE 


Do you need more from your hosting? 1&1 Web Hosting packages offer a range of 
features to make your website secure and reliable. With more than 11 million customer 
contracts, £2 billion in annual turnover, 5000 employees and 5 high-performance 
data centres, 1&1 is one of the world's leading web hosts. With 20 years' hosting 
experience, we continue to be a reliable partner. Our new maximum security features 
give you even more reason to trust 1&1 for all your hosting needs. 
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Your website data is stored separately 
in two high-performance 1&1 Data 
Centres. Plus, automatic daily backups 
included. 


✓ 


SITELOCK FOR ALL-ROUND PROTECTION 


With SiteLock your website is automatically 
scanned for harmful malware, viruses and other 
vulnerabilities. Your data will be kept safe and 
31-OCT-2012 y 0(J can c jj S p| a y the SiteLock protection badge 

on your website, showing your customers that it is credible and 
trustworthy. 


SITELOCK.COM 

9, SiteLock 

LlJ MALWARE-FREE 



united 

internet; 


DOMAINS E-MAIL | WEB HOSTING eCOMMERCE SERVERS 


*12 month minimum contract term applies. Visit www.1and1.co.uk for full offer details, terms and conditions. Prices exclude VAT. 









12 MONTHS 

50% OFF ALL 

1&1 HOSTING PACKAGES 
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L 1&1 Starter 

1&1 Standard 

1&1 Unlimited 

1&1 Business 

1 5GBWebspace 

50 GB Webspace 

Unlimited Webspace 

Unlimited Webspace 

1 MySQL 5 Database 

1 (1 GB each) 

10 MySQL 5 Databases 
(1 GB each) 

100 MySQL 5 Databases 
(1 GB each) 

Unlimited MySQL 5 Databases 
(1 GB each) 

1000 e-mail accounts (2GB) 

3000 e-mail accounts (2GB) 

5000 e-mail accounts (2GB) 

Unlimited e-mail accounts (2GB) 

1 

- 

1 domain included. Choose from 
.co.uk, .me.uk or .org.uk 

1 domain included. Choose from 
.co.uk, .me.uk or .org.uk 

PHP 5, PHPDev, Zend Framework 

PHP 5, PHPDev, Zend Framework, 
Perl, Python, Ruby, SSI 

PHP 5, PHPDev, Zend Framework, 
Perl, Python, Ruby, SSI 

PHP 5, PHPDev, Zend Framework, 
Perl, Python, Ruby, SSI 

Unlimited Traffic 

1&1 Click & Build Apps: Wordpress, Joomla!®, Drupal™ and more 

jig 1&1 Security: Geo-redundancy, SiteLock protection and 1&1 Webspace Recovery 

24/7 phone and e-mail support 


£7.49 ^£7.49 I ^£A .99 

per month* ggpr per month* I per mont 
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Your emails, tweets, forum comments. The social network, but in print 

This month we search for alternatives to Word Press and give eCommerce startup advice 


subject A WordPress alternative 


From George Stavin 




WordPress has been my web publishing platform of choice for a while 
now, but I am looking to change. The problem is, I have no idea what 
my next step should be. I know there are plenty of alternatives out 
there including Joomla, Drupal, concrete5, Squarespace, and Tumblr, 
but I don’t really want to try them all to find out which one suits my 
needs. Which CMS would you recommend, and if I can be a bit cheeky 
will you be doing any tutorials on it? 

As you might have guessed we at Web Designer are big fans of 
the WordPress platform. It’s free, easy to set up, has a huge 
library of themes and plug-ins and is extremely popular with the 
design and development community. However, if you are looking 
for an alternative we would recommend Joomla. It offers a whole 
set of powerful features straight out of the box and is now 


mobile-friendly thanks to the Bootstrap framework. We 
think that the other CMSs mentioned don’t have the 
flexibility or power of either WordPress or Joomla. 





WebKit 

Discover the kit 
needed to help 
create inspirational 
and interactive 
webpages 



Create a fullscreen 
image gallery with 
jQuery 

bit.ly/OSZgup 



Secure WordPress and 
stop the hackers 

bit.ly/Q7cYpy 



subject Starting a shop 

From Nathalie Rocchi 

I have just finished putting 
together my latest project and for 
the first time I have decided I am 
going to include a shop. Problem 
is, I have no idea where to begin. I 
have decided to start out small, 
around ten products, and will be 
looking to expand in the future. 

Any recommendations? 

The search for an effective and 
suitable eCommerce solution is 
not an easy one. There are 
plenty of options on the market, 
but as you are starting out 
small we suggest that you try 
Big Cartel (bigcartel.com). This 
offers a free online shop for up 
to five products and charges 
$9.99 a month up to 25 
products. And it’s customisable, 
making it easy to match a site. 


s..bject Learning from 
scratch 

From Simon Barclay 


Hi guys. Due to a back injury 
(better now) I spent three years 
sat on my PC, eight hours a day! 
Some serious learning from 
scratch and building later, and 
my website is now finished (to 
the relief of my wife, she has 
plenty of DIY lined up). I’m now a 
dab hand at JavaScript and 
jQuery, and I sleep and eat 
HTML. It looks like I’m going to 
now change my career. Who 
knows? Someone suggested I 
should submit it to your 
magazine. Could you check it out 
and see what you think? www. 
abbey-hey-domestics.co.uk, 

Web Designer welcomes you 
to the design community and 
we are always happy to take a 


look at the skills of new 
designers and developers. 
Readers, take a look, let Simon 
know what you think, and 
maybe offer some advice on 
where he can go next? 


subject Sticky disc 
issues 


From Ken Toll 


I’d like to provide customer 
feedback on the method used to 
secure the CD to the magazine. 
Basically, it is impossible to 
remove the recourse disc 
without damaging both the CD 
sleeve and the magazine. 

This is an issue that Web 
Designer is looking to resolve 
as soon as possible. We think 
that with the introduction of the 
cardboard wallet and a 
different glue we are pretty 
close to getting it right. We just 


Joomla offers a set of powerful features straight 


Sublime Text 2 tips out of the box, and is now mobile-friendly 

bit.ly/QA4DJK 
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Join the conversation as it happens on Twitter Q @WebDesignerMag 
Comment on the news and opinion @ www.webdesignermag.co.uk 
Email the editorial team at @ webdesigner@imagine-publishing.co.uk 


tried to get the disc off the back of Issue 
201. With a little persuasion and patience 
we managed to get it off with a single rip 
in the page. 

subjedDigital edition 

From Quan Nguyen 


I have a subscription for the Web Designer 
print issues. I recently found that there is 
an iPad app you can download to view 
copies of Web Designer. 

I was wondering if I’d have to pay for 
another subscription to view my issues on 
the iPad. Could you please advise? 

Currently, the print subscription and the 
iPad app are two completely different 
entities in terms of subscriptions. If you 
wish to purchase the magazine via the 
iPad, you will have to pay for this as well 
as any physical copies you have 
purchased. The current setup allows the 
user to choose which option they wish to 
subscribe to, and it allows us to keep the 
price down. 



Imaging Publishing 




Comments from the Blog 




Web Designer is always keen to hear from its readers, followers and visitors. Here we bring 
together a specially selected collection from the last month. A few comments on the 
WordPress feature 'Secure WordPress and stop the hackers’ (bit.ly/TDRSPl) 


Mark said: WordPress is a 
very powerful platform and 
great for search engine 
optimisation once it’s 
configured, but I do feel the 
WordPress team could do 
more to secure the scripts. 




Bobby Anderson said: There’s a 
great security plug-in called 
WordPress Firewall 2 that I’d 
recommend installing from the 
second you’ve installed the system. 
wordpress.org/extend/plug-ins/ 
wordpress-firewall-2. 



Paul said: To improve your 
security I also say the first 
thing you should do is 
remove the admin user from 
your site. This is the first 
username hackers will use to 
get into your admin area. 


A specially selected collection of tweets from our 20,000+ twitter followers 



@E_Maile hallelujah!!! 

@WebDesignerMag has 
written a beginner's guide to 
using GitHub. Finally I’ll 
understand what all the fuss 
is about:) 



@ClawsDesign Now 
subscribed to the 
@WebDesignerMag -1 
would highly recommend it 
to anyone interested in 
improving their designs! 




@jgtweeting Currently 
doing an online course 
from Jeffery Way. Was 
completely made up to 
see him in 
@WebDesignerMag 


header. 
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Dries Van haver is the strategic 
partner and UX designer at 
Lavagraphics, a resourceful graphic 
unit based in Belgium’s capital of 
creativity, Ghent. He focuses on 
online content with a keen 
eye for both usability 
and design. 


Dries Van haver 


Strive for 
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Perfection is all it takes to be a great interactive designer 


I am glad that I was born in an era where smartphones didn’t 
exist, my life always being posted on so-called social networks, 
Liked and shared by many. For those who recognise themselves 
in the same category, they will agree that communication was slow, 
but at least personal. We learned to lay an eye on the detail, check 
and double-check. Why? Because we had the time. Because there 
was no rush to tweet what we saw every minute. Less efficient? 
Maybe, but we didn’t miss a thing, we enjoyed the moment. 

That guality I’m talking about is inherent in design. Take your time; 
remove all the clutter, put some music on, and get to it. Before you 
judge me as a minimal hipster wobbling in my Eames chair. I’m 
talking design - not inspiration gathering. Because then you should 
be out in the city, taking pictures with one hand, listening to music, 
kicking a Hacky Sack to the kid in the street while using your other 
hand to throw a couple of coins into the busker’s bag. 

Every once in a while let your curiosity take over, without any 
shame or reason to feel stupid afterwards. I remember one of my 
walks resulted in following a Fluo thread street after street, corner 
after corner. Thinking I found something special, I ended up at the 
same point I started my journey. Those things happen, and with 
design it’s the same. You’ve been brainstorming for hours and think 
you’ve found it, only to realise you’re back where you started. But 
hey, new things will come along. Just ‘...keep, keep marchin” as 
Raphael Saadig once sang. 

Design for the target group. Think about the project and put 
yourself in the shoes of the user/visitor/contributor or whatever role 
is needed. Just make sure that your fantasy is the one you need to 
get the job done. 

Take a pencil and a piece of paper. You don’t need to be Dali to 
draw, just put down your ideas in some guick sketches. I’m not old- 
fashioned either, so technology jumps in at this point. Roughly 
design your ideas in the application you feel comfortable working 
with. Present it to your colleagues and creative friends by telling 


them it’s a draft. They will understand - your client won’t. Great ideas 
come along, but now the most difficult phase comes in. 

It has something to do with discipline and perfection. Name your 
layers, make it pixel-perfect, keep in mind the carrier and flexible 
content (you’re not designing for print here). Learn to reuse objects, 
don’t copy and paste them several times. Be lazy but do it well, so 
your laziness doesn’t result in doing a poor job. 

In every phase you should focus on the right part. Once the idea 
has been approved and everything is designed, perform a final 
check and make it perfect. Is there blurry text? Do you need a 23 or 
24px margin? It all matters. 

As a member of the Awwwards jury, more often than not I see 
good projects passing me by, but the great ones whose designers 
have thought about every detail - those have my full attention. An 
eye for detail makes it better for the end user. Never forget that 
design and usability go hand in hand. You’ll be amazed what the 
right font, spacing, or use of colour will do. 

Stand out and create something unigue every time, no matter if 
the client is big or small. Make them happy, and let your team be 
proud of what they do. Don’t leave the client in the dark; keep them 
on track. Take them along on the journey but only show them the 
great views, not the ghetto clutter you’ve created in your brainstorm 
sessions. Defend the design you created, don’t just nod at all the 
feedback. Rather, take it into consideration and let it bring you new 
ideas, not destroy yours. 

Everything is possible. There are no limitations to creativity, and 
even more: front-end guys will be pleased with the challenge you 
present them. The team will be proud of their work and your work. 
Projects you dreamed of will fly in, but don’t take that for granted - 
you’ll be chosen for being not just good but being the one that 
strives for perfection! 

Though remember, we’re human. Everyone makes mistakes. But 
hey, we can correct them. So if it’s good, just make it perfect. 


•1 Every once in a while let your curiosity take over; without any 
shame or reason to feel stupid afterwards §• 
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Pay As You Go 
Advertising 

Advertise on Google. 

Pay only when people click on your ad. 


For most types of advertising, you pay for people to see your ad. With Google AdWords advertising you 
only pay when they click to visit your website. So you get exactly what you pay for - more customers. 
And because this is pay-as-you-go advertising, you have complete control. 



Control how much you spend 

You can set a daily spending limit and an amount you're happy to pay for people to click 
on your ad. The price is chosen by you, not us, so you never have to worry about going 
over your budget. 



Control who sees your ad 

Your ad will only appear when potential customers are searching online for relevant 
terms you've chosen to describe your business. 



Control where and when they see it 

You can choose to target your audience by location and time: attract local customers 
during your opening hours or, if you'd rather, promote yourself to a global audience 
round the clock. 


r 

Voucher missing? 

Don't worry, someone in your company may 
have beaten you to it. Track them down 
make sure their 

£25 is turned into £100* 

Offer only available to businesses in the UK. 

L ^ 



Don't miss out - try it today 
We'll turn your first £25 of advertising 
into £100*. To start attracting new 
customers today: 



Visit google.co.uk/adwords 



Or call 0800 169 0478 f 


+ Calls to 0800 numbers are free from BT landlines but charges may apply if you use another phone company, call from your mobile phone or call from 
abroad. Support is available in English only. Offer subject to website and business qualification. 

Terms and conditions apply. In order to activate this offer, you need to enter the promotional code through the Billing tab in your account before 
31 /01 /2013. Promotional codes have no promotional value and entry of the promotional code serves only to begin your qualification for the associated 
promotional credit. To qualify for the promotional credit you must accrue advertising charges in the amount of £25 within 31 days of entering your 
promotional code. For example, if you enter the code on 05/01/2013 you'll have until 05/02/2013 to accrue advertising charges in the amount of £25. 

In all circumstances, you must enter your promotional code before 31/01/2013 in order to activate this offer. Your account must be successfully billed 
by AdWords and remain in good standing in order to qualify for a promotional credit. The promotional credit will be applied within approximately 5 days 
of your account reaching the threshold for accrued advertising charges specified above, as long as you've activated your account using the promotional 
code and fulfilled all requirements stated in the offer. Once applied, the promotional credit will appear on the Billing Summary page in your account. 

For the complete terms and conditions, see http://www.google.co.uk/adwords-voucherterms. Google Ireland Limited, a company incorporated under 
the laws of Ireland, with company registration number 368047 and registered office address at Gordon House, Barrow Street, Dublin 4, Ireland. 
Copyright 2012. Google and Google AdWords are trademarks of Google, Inc. and are registered in the US and other countries. 


Google 



Richard is the lead Symfony 
developer at Sensio Labs UK and 
one of three Symfony Gurus in the 
world. He was accepted on to the 
Symfony Exam council to help 
shape and grow the syllabus. 
He is also a dependency 
injection enthusiast and 
community builder. 


Richard Miller 


Secrets of 
Symfony 
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Is it time to realize the potential of the PHP framework Symfony2? 


S ymfony2. Never heard of it? Well now is the time to a closer 
look at this PHP web development framework and get 
ahead of the rest. Joining the Symfony2 revolution is just the 
beginning. Getting yourself certified will immediately make you a 
member of a very exclusive club. If you joined today you’d be one of 
three. It doesn’t get much more exclusive than that. But Symfony2 is 
not about exclusivity, it’s about community - and the more members 
that join the small band of certified developers the better. 

Now that you have been tempted with a little prelude, lets get to 
the crux of the matter. What is Symfony2 and why should you care? 

Symfony2 is a PHP web development framework, a philosophy 
and community - all working together in harmony. It is the 
development of the original Symfony framework, but harder, better, 
faster and stronger. 

For me, the most exciting thing about Symfony is that as well as 
offering a full stack framework, it is also a collection of standalone 
components that can be used on their own outside the framework. 
The framework is, in a sense, a pick ‘n’ mix of components that can 
be used as part of smaller projects, introducing them as a way of 
refactoring legacy code, and can even be incorporated as part of 
other frameworks. Symfony components are already being used in 
libraries such as Doctrine 2 (an Object Relational Mapper for 
database abstraction) and Guzzle (a PHP HTTP client) as well as 
phpBB4, the PPI Framework, and eZ publish. 

To demonstrate its growth, Drupal developers are also 
incorporating Symfony2 components into Drupal 8, a step that has 
the web community debating what Symfony2 can bring to the table. 
Drupal developers have always prided themselves on innovation 
and are constantly looking for new ways to improve their model. 
Developers who have previously shied away from using Drupal will 
be encouraged by the inclusion of Symfony components to further 
push innovation and improve code guality. Nevertheless, Drupal is 
growing fast, and with demand for it ever increasing, adopting 
Symfony’s many reusable components has enabled them to 
enhance their own strong architecture with another. 


Symfony2 can be seen as a beautiful new creation of all the best 
parts of existing frameworks. It draws on experiences from the first 
version of Symfony and other PHP frameworks, but also looks 
outside of PHP to draw inspiration from the best practices, libraries 
and frameworks of other languages - Java, Python, etc. Symfony2 
focuses on best practices and writing clean, readable and testable 
(and well tested) code. The use of dependency injection along with 
the service container and event dispatcher make for flexible code 
which you can build on to ensure your application has high 
standards of code guality. 

Open source enthusiasts will be pleased to know that Symfony2 
favours configuration over convention so it can be reconfigured to 
suit the needs of your project. This means you are not fighting 
against the framework when you need to do something beyond 
typical web needs. However, don’t worry that you will need to 
configure everything as the default configurations are perfectly fine 
in many cases. And, in the interests of freedom and happiness in the 
open source community, Symfony2 is not in competition with any 
other frameworks as it can be incorporated into any other framework 
to develop and enhance it. 

Like many other open source projects around the world, 
Symfony2 already has a strong community behind it providing all 
the support budding Symfony developers need to get involved. The 
community is constantly developing new features and are willing to 
offer support and advice whether it is via Twitter, mailing lists and 
forums, or meet-ups and conferences. 

If you now think that with all its wonderful features and notions of 
freedom it is a darned shame that there are only two certified 
developers out there, fret no more. In September, developers in the 
UK had their first chance to sit the exam to be certified in the 
framework - it’s easy to join the Symfony2 revolution. The first exam 
took place at the Symfony Live conference, open to all Symfony 
enthusiasts around the country, but that was just the starting point 
of the development of Symfony2 becoming the go-to framework for 
PHP developers. See live.symfony.com for upcoming events. 


ill Symfony2 is a PHP framework, a philosophy and community if 
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Hosted Technology, 




Technology you can rely on 

today, tomorrow and the future 


If you’re driven mad looking for hosted technology which 
gives you complete peace of mind, then look no further. 

Fasthosts has been taking the headache out of delivering 
industry-leading technologies, for thousands of customers, 
just like you for over 13 years. 

With wholly-owned and managed secure UK data centres 
and our team of experts, Fasthosts are always here, 
supporting you every step of the way. 

For help and advice call free on 0800 6520 444 


WEB HOSTING ■ DOMAINS ■ EMAIL ■ DEDICATED SERVERS ■ VIRTUAL SERVERS ■ RESELLER HOSTING 


fasthosts.co.uk 

Making business work better online Of call 0800 6520 444 
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Gallery of stunning web design^® ■ ^ 

Lamboo a Digital Agency 

www.lambooja.com.br 

Development technologies Adobe Photoshop, HTML5, CSS3,jQuery 





Designer Lambooja Digital Agency 

www.lambooja.com.br 

With a strong sense of style, this site shouts about 
Lambooja’s abilities to translate its clients’ briefs 
into impressive online destinations 


dopting the now familiar 
one-page scroll format 
this site showcases the 
multifaceted talents of 
designers Andre Alves 
who developed the 
information architecture 
and design, and Victor 
Abadio, responsible for 
programming. Using a 
sporting motif, links 
allow easy access into the site that can 
be understood no matter what 
language it is you speak. 

Lambooja outlined its approach to 
the design of the site: “We work with 
digital marketing, but we present it 
through a vintage approach, making 
analogies and using the language of 
the sports universe such as soccer, 
volleyball, tennis, basketball, baseball 
and other team sports. Although each 
of these universes has its guirks, the 


way to achieve success is virtually the 
same: a focus on results, planning, 
adaptability, agility and teamwork are 
the principles needed to win in sports, 
which we parallel within our design.” 

The concept of vintage sport invokes 
a level of nostalgia, but is also universal, 
allowing the design to speak to any 
nationality. Social media is front and 
centre with this site design, as the social 
space is a key channel for this design 
agency. Compressing the essence of 
this agency’s talents into a short 
scrolling site is a masterstroke and is 
certainly appreciated by their clients 
that can clearly and efficiently see what 
this agency can do for them. 

Well-thought-out layouts work in 
conjunction with a colour pallet and 
page elements to create a professional 
looking site that doesn’t need reams of 
text or an image overload to 
communicate the skills on offer. 


##'The concept ofvintage sport invokes a 
level of nostalgia but is also universal if 



<2\bove> 

• Social media is clearly vital for Lambooja, as it 
places the links to these spaces directly on its 
site’s homepage 


<Helow> 

• Each page of the site’s design promotes the 
developer’s desire to achieve simplicity and light 
interactivity throughout 
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Got it? Flaunt it! Tell us about your siteOwebdesigner@imagine-publishing.co.uk 


LIGHTS 






<Top left, c:loc:lcwise> 

• Each page of the short scrolling 
website can be jumped to from this 
page. The designers make 
navigation fast and efficient 

• The vintage sports theme is 
evoked on this page. The 
uncluttered layout is appealing 
to the eye 

• Current clients are showcased 
again using the sporting motif that 
runs throughout the site 

• The last page of the Lambooja site 
reinforces the vintage sports 
concept with intuitive use of 
graphics and an extremely 
well-chosen colour pallet 





#FD4A0B 


abcABC 123456 

<l\bov»> 

• ChunkFive is an ultra-bold slab serif typeface 
developed by The League of Moveable Type, and 
is available from Font Squirrel 


<15elo\*v> 

• Helvetica is a classic font originally designed by 
the Swiss typographer Max Miedinger in 1957, and 
is available from Linotype 


abcABC 1234567890 
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LIGHTg|gg Know a site that deserves to grace these pages? Tweet us now 0 @WebDesignerMag 


Color Exposure 
range from Diesel 

www.diesel.com/colorexposure 

Development technologies 'done Photoshop, Adobe Illustrator, C5S3, 

JavaScript, jQuery 



Designer Ultranoir 

www.ultranoir.com 

The new Color Exposure collection 
from Diesel is presented via an 
original and fun site 


s the collection title 
suggests, this site uses 
colour to present the 
new range of jeans from 
Diesel in a fresh and 
uncluttered page design. 
Ultranoir showcase each 
style in the collection 
with interactive 

components that give 
the viewer a chance to 
explore each product before buying. 

Ultranoir explains: “We tried to 
present this collection in an original 
way. It was also important to let the user 
be free to move and to discover things 
at their own pace, in a funny way. For 
the process, we started to think about 
the concept by conceiving the UX with 
sketches and a storyboard. 

“The main challenge of this website 
was to create an original user journey 


with guick access to the products. So 
we rapidly did some graphical 
researches to illustrate the UX and 
create a strong visual impact according 
to Diesel brand. Then we used Flash to 
guickly prototype this step.” 

Clearly it is the navigational elements 
that standout with this design. Colour 
can be selected, but so too can the 
level of zoom, which is placed in full 
control of the site’s viewer. Each 
component fits together beautifully to 
create a mood, aesthetic, and brand 
awareness, as well as communicating 
the values of the new Diesel Color 
Exposure range. 

The visual aspect of this site’s design 
is critical. Ultranoir have taken a strong 
brand image and laid over this a user 
interface that is intuitive, smooth and 
ultimately speaks to Diesel’s new and 
future customers. 


ii The main challenge of this website was 
to create an original user journey with 
quick access to the products •• 


DIESEL COLLECTIONS CAMPAIGN ONLINE STORE STONE L0CAT1 



® 2012 OIESEL P.IVfl IT00642650246 



<2\bove> 

• The level of zoom that has been included on the 
site is astonishing, and reveals high levels of detail 
to potential buyers 
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<2\bove> 
• Colour is used throughout 
the site design to convey 
the brand values of 
Diesel’s new range 


<Top left, c:loc:kwise> 

• Visitors to the site can take a 
closer look at each pair of jeans 
via an intuitive zoom feature. 


abcABC 12345678 

abcABC 1234567890 


• To reinforce the brand, the 
developers have included high 
quality video of each product 
that gives customers a real 
world experience of each jean 


<J\bove,Top> 

The main font on the site is Museo Slab in 500,700 
and 900 weights. Designed by Jos Buivenga, the 
typeface can be bought from MyFonts 

< Above, boUoin> 

For interactions DIN Condensed Black is used. 
Developed by Albert-Jan Pool, the font can be 
bought from the Font Shop 


• The site also contains 
information about how the 
jeans in the new Color Exposure 
range were created 

• General information about 
each jean in the range is just a 
click away using the innovative 
zoom widget 
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• The sequel to the wildly successful The Songs of Dreams, the new 
House ofAnubis game is a tour de force of gameplay 
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<2\bove> 

• Gameplay is created on the 2D and 3D plane to create a rich 
environment for the characters to inhabit. It adds a wonderful 
depth of view for the player 


<2\bove> 

• Each room has been designed to be as textured as 
possible. The graphics make the most of the 
custom-built 3D engine 


<2\bove> 

• Sound, graphics, gameplay and storyline all come together 
brilliantly to give players of the previous game a whole new 
world to experience and explore 
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<2\b«ve> 

• Players can easily keep track of their progress 
through the game, as well as save each session 


<Uelow> 

• Dandelion In The Spring is the main font in use. 
Created by Brittney Murphy, it is available from 

Dafont.com 

<Helow bottoiu> 

• Adelle Basic is a slab serif typeface, designed by 
Veronika Burian and Jose Scaglione. It can be 
bought from MyFonts 

qdcABC 123H567TO 

abcABC 1234567890 


House of Anubis: 

The Song of Dreams 

www.previews.nl/anubisusa/se02 

Development technologies Adobe Photoshop, Adobe Illustrator, Adobe Flash, Maya, Logic, Ableton Live 



Designer Media Monks 

www.mediamonks.com 

The latest site from Media Monks pushes the 
boundaries of online gaming to create a console- 
level experience 


ot content with their first 3D 
adventure game that was played 
over 4 million times last year. 
Media Monks wanted to push the 
boundaries for this new 
incarnation. Online games come 
and go, but few are remembered. 

Using complex gameplay that 
includes action on the 2D and 3D 
plane, this site is a showcase for 
the developer’s technical and 
creative prowess. For the in-game characters, 
the developers used animated vector assets 
drawn in Illustrator, over a 3D animated 
reference dummy created for the last game. 

“The creation of every room went from a 
gameplay minded layout, to being tiled and 


textured, to being decorated with objects and 
assets, getting lighting effects and enemy 
paths etc,” described Media Monks. “There’s a 
lot of love and hard work in every room. Keep in 
mind that this is a custom-built 3D engine within 
Flash and could be played without any 
additional plug-ins, and it doesn’t make use of 
the molehill API.” 

As the game play progresses the player feels 
completely immersed in the world that the TV 
show has created. The lush graphics coupled 
with smooth 3D gameplay is completely 
engaging without putting a strain on the 
technology, which could have ruined the 
experience for visitors. Overall the new House 
of Anubis game is a triumph of creativity and 
technical skill. 


f f Using complex gameplay that includes 
action on the 2D and 3D plane, this site is a 
showcase for the developer’s technical and 
creative prowess !# 
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Design diary l 

Ride the development cycle 





!• 

Lisa Lee, 
project manager 


Kilo takes up the challenge to 
launch local product developer 
Zensorium and its Tinke device 
into the global marketplace 

Kilo is a small Singapore-based digital 
agency that prides itself on creating rich 
media content for its clients. It is a young, 
inventive agency, and this is part of the reason 
that local product developer Zensorium was 
attracted to it. 

Zensorium were keen for Kilo to take their 
mobile health product, Tinke, and present it in 
a fashion that would impress web designers 
and entice potential customers to purchase. 

Creative director Benjy Choo: “It’s not 
everyday that we get a chance to work on a 
newly developed product from Singapore. 
Being a small island, we would more likely be 
briefed on projects for service providers than 
new physical products. So when the folks from 
Zensorium approached us to design the site 
for Tinke, we jumped at the opportunity. 

“The first version of their website was 
passable at best. It had a simple navigation 
system, but Zensorium sorely needed to clean 
up its online identity, and it had some really 
dodgy copywriting. 

“Before we began doing anything, we had to 
sit them down and agree on the approach we 
were going to take for the product. Fortunately, 
the client was very receptive to the direction 
we were going to take. 

“Once done, it was an iterative process of 
dialogue between the client, the servicing 
team, the designers and the technologists to 
conceptualise and develop the final site.” 


Project I TUlUfi 

\/Veb I zensoiium.<:oni/tiulMi/iMcl«x.htinl 

Company I Kilo 
Web I uiio.ss 


,e in^lraUonforthesiteconcept was based very much in the product, 
le taglin e 'Tinke anywhere' provided the central theme, allowing users to 
low the site wherever it went 


isa Lee: “The idea for the site came from the fact that 
ou can bring Tinke almost anywhere with you, as it is so 
ompact. Someone on the team decided to come up with 
ae line ‘Tinke anywhere’, and it has been the central theme 
ar the entire website. 

“We wanted the device to stay with the user on the site - 
it least for the initial parallax plate. They can choose the 
:oiour and it’ll follow their journey throughout. Initially, the 
Tent provided us with pages of research papers on the 


product properties, but we were fortunate as they were 
pretty much of the same wavelength, and took up our 
recommendations regarding the bite-sized nuggets of 
information and culling of large chunks of unrelated content. 

“One big problem that we faced was that the product was 
in development during the site design process, and we had 
to use substitutes for first few versions of the site. We relied 
on Photoshop comps and quick sketches to strip in the 
product on some pages. 
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With a product created locally but aimed at a global 
market, the site design needed to reflect a concept and 
style that matched its ambitions 


Lu Jiayi: The design team handled the 
preparation of the visuals and animation. I 

think we went through about three to four 
versions of the website. These initial 
concepts had to portray a global feel for a 
product developed in Singapore, as it was 
taking on other devices in the US market. 

“After confirmation of the design, the PSD 
files were cut up and assembled by the 
designers for the tech team to add 
animation and JavaScript components. 


“On a separate track, the product 
dimensions were sent to the 3D modellers 
and they started modelling the product in 
3D. Simple animation were added for the 
rotation and LED lights for the product. 

“Bear in mind that all these were taking 
place while the product was still in its 
prototype phase and there was no physical 
object to base our modelling dimensions on. 
In the end, the 3D team did a fantastic job in 
replicating the model to its exact size.” 




tinke 



riwfca lit 


MOBILE APPLICATION 
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The integration of a host of different 
application provided the first challenge. 
The second was to change Flash-based 
animations into HTML and the third to 
prepare iOS versions 

Dominique Wong, Glenn Ko: “The biggest challenge faced when 
we first started was the many different applications that we 
needed to integrate, from the shopping cart system to the 
customer support module. To further compound that, we had to 
link all these to the iPhone app. 

“We proposed two third-party eCommerce services for the site 
- OpenCart and Zendesk. 

“Additionally, coming from a Flash-based background, coding 
the sliding and animation was quite a steep learning curve, having 
to translate the slides, fades and overlays to HTML. 

“To compound the complexity, we had to prepare iOS versions 
of the website as well. Bespoke iPad and iPhone versions were 
developed concurrently with the main site. The mobile and tablet 
versions had to also keep in line with the ‘Tinke anywhere’ concept, 
albeit in a more limited manner." 
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Isaac Wong: “There was a big push in marketing on the 
ground to get more exposure for the product. This was 
largely led by the folks at Zensorium, and ended up 
generating quite a lot of buzz. 

“We deliberately gave the site a more international 
appeal as we were marketing to the West, and moved its 
‘made in Singapore’ origins to the descriptive text on the 
rest of the site. Being on some awards site helped heaps. 


“Interestingly this was one of the ‘fun to do’ projects that 
we decided to take on at Kilo which turned out pretty well. 
As a company we guided a client who was just looking to 
sell a product online through a checklist of design, 
implementation, community, support and aftersales 
service. It also served as a website to champion products 
made in Singapore and has generated quite a lot of interest 
with local manufacturers.” 
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Progress 

through 

Technology 

Global digital superstars Bartle Bogle Hegarty 
reveal how they created the celebrated Audi 
tagline, Vorsprung durch Technik, and sent Levi’s 
into the stratosphere with its Marvin Gaye 
soundtracked Launderette campaign... 


who BBH London wliat Global agency working with the biggest brands on the planet 
whore 60 Kingly Street London, W1B 5DS web www.bartleboglehegarty.com 


artle Bogle Hegarty, founded in 
1982 by British ad men John 
:::::::: *••••!!• Bartle, Nigel Bogle and John 

SSSSSISS •XIIIIXS Hegarty, is today recognised as 

one of the most famous 

•••••••••••••••••a* 

!”!!!!! creative advertising agencies 

!!!!!!” •!!!!!!!! on the planet. It has worked 

with many of the worlds best- 
known brands, and has 
produced some of the most 
memorable campaigns ever 
seen. Mention the name Flat Eric and memories of the 
cheeky little puppet will come flooding back. Perhaps 
even better-known is the iconic Levis ‘Launderette’ ad, 
another impressively memorable campaign. And, it 


could be argued that neither of these hugely successful 
works are considered their most definitive work to date. 
The agency stills works today with its founding client, 
Audi, who still use the world famous ‘Vorsprung durch 
Technik’ tagline in its advertising campaigns. 
Alongside this well-known trio there are a host of 
household names including Diageo, Unilever, British 
Airways and Google. One of BBH’s most recent 
campaigns was the ‘Don’t Fly’ British Airways advert 
aired around the 2012 London Olympics. 
Success breeds more success and BBH has branched 
out from its humble beginnings to have offices in 
London, New York, Sao Paolo, Singapore, Shanghai, 
Mumbai and Los Angeles, and it currently employs 
over 1,000 staff worldwide and 400 in London alone. 
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BBH timeline 

Established 1982 

Founders John Bartle, Nigel Bogle, 



The Levi’s Flat Eric ad was 
Launched via unbranded 
emails at a time when 
viral advertising was 
unheard of. 


Barclays’ 56 Sage | My Space’s Fan Video 
Street taught I gave music fans the 
money skills to I chance to appear in a 
young people I video alongside their 
through gaming. I favourite artist. 





The ASOS Urban 
Tour campaign 
was a fully 
interactive, 
shoppable video. 


The success of Bartle Bogle Hegarty is based in the 
belief of being creative, but also striving to make any 
of its clients’ brands as famous as possible. To enforce 
the message and add to its continuing success, BBH 
recently won Agency of the Year at the coveted 
Webby Awards in honour of its digital work on 
campaigns for both Google and ASOS Menswear. 
If that wasn’t enough, the London office is currently 
Agency of the Year as voted for by Campaign 
magazine. Creative Review magazine and the 
ARROWS (the British Television Advertising Awards). 

Long before the awards were flooding in and the 
internet had a major bearing on creative and digital 


agency working practices, life for BBH was relatively 
simple. The agency’s big ideas were expressed 
exclusively through ads. 

The agency’s first ad was for the global giant Levi’s 
and demonstrated the intrinsic power of advertising. 
Black Sheep portrayed a simple but effective 
message, with a black sheep going against a flock. It 
became the agency’s icon, and according to BBH, 
‘Now it reminds us that when the world zigs, we zag’. 

This was followed by the infamous ‘Vorsprung 
Durch Technik’ (progress through technology) line for 
an Audi ad. Decades later and the endurance of the 
tagline still sums up Audi’s business philosophy. 


But BBH is not an agency to rest on its laurels, and 
it is far from comfortable standing still. Just as well 
perhaps given the ever-evolving media landscape 
that surrounds them on a daily basis. To compete and 
keep up they have applied their passion for big ideas 
and craft skills to new media channels, and have 
evolved their skillset to rise to the challenges and 
opportunities of the digital world. 

What makes an agency memorable? A body of 
enduring, elegant and imaginative campaigns. True, 
but a few simple words that make up a name can 
have just as big a bearing on the success of an agency. 
There are often complicated and amusing stories 
behind the naming of an agency, but the naming 
convention for BBH was incredibly simple - it is the 
surnames of its three founders 

Beyond the agency moniker there are now a whole 
host of factors at work turning BBH into a powerful 
global presence. One such factor being the corporate 


BBH Is not an agency to rest on its laurels, 
and it is far from comfortable standing still §# 
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Weetakid for 
Weetabix used 
Augmented 
reality on the back 
of a cereal box. 



The Churned for 
Yeo Valley had a big 
TV spot and a 
Facebook karaoke 
competition. 


Champion of the 
Playground for Fruit 
Shoot was a skills 
game that bridged the 
on and offline worlds. 




w 

• 

i i iJL k 


The Refuge Don’t cover it up 
video used YouTube video 
star Lauren Luke to try to 
encourage people to speak 
out about domestic violence. 




§ § As well as campaign websites, BBH is designing 
native apps, digital platforms and products 9 IP 1 


website. Head of UX Adam Powers reveals how the 
agency site is a constant challenge, and BBH has a 
dedicated team to ensure that it reflects the agency’s 
evolving nature. “The agency website is an eternal 
challenge - we recognise the importance of our face 
on the web. It’s a showcase for our latest work, an 
archive, and a route into BBH for prospective clients, 
employees and interns. We try to keep it up-to-date 
and relevant, and the site must reflect our global 
activity as well as our UK output. There is a team of 
people tasked with that very job. That said, our site is 
a few years old, and so much has happened in the 
advancement of web technologies, UX and design 
possibilities we’re looking at creating something new”. 

The BBH site is a key portal, but keeping BBH at the 
top if its game are its clients, without whom there is no 
success. Over the lifespan of BBH, the agency has 
enjoyed huge success, and that success has lead to 
an influx of possible clients clamouring to work with 


them. While the direct approach is welcomed and 
appreciated, BBH is egually happy to go and pursue a 
brand with whom it would love to work. 

Projects comes in all shapes and sizes, and an 
agency as successful as BBH has the power to choose 
who they work with. Powers explains that the agency 
is keen to do much, much more and are prepared to 
take on most projects, though eCommerce is an area 
it tends to avoid. “Although we have had some 
significant successes with our digital output, we are 
keen to do much more, both in terms of volume and 
in range. As well as campaign websites and online 
advertising, BBH is increasingly designing native apps. 


digital platforms and products. Our extensive roster 
means we have clients with different digital needs, so 
we look to do the things that will have the biggest 
impact for them. We have the skills in-house to deliver 
pretty much any digital product, but we tend to steer 
clear of heavy lifting eCommerce sites. We aim to 
focus our creative vision on effectiveness and ensure 
that whatever we build supports and grows our 
clients’ businesses.” 

Large-scale projects are very much part of the BBH 
landscape and bring together all the major 
departments in the guest for a common goal. Head of 
interactive production. Josh Tenser explains the 
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KEY PROJECT 


ASOS Urban Tour 

www.youtube.com/user/ASOSfashion 

The challenge was to drive awareness of the ASOS 
brand among guys aged 18-25. Young men are less 
engaged with fashion than young women. Influenced 
by their peers, they seek inspiration from culture 
rather than catwalks. 

In September last year BBH showcased the new 
ASOS collection by creating a totally interactive 
entertainment experience featuring incredible 
performances from street talent across the globe. A 
cutting edge shoppable video allowed BBH to sell the 
collection with seamless eCommerce functionality. A 
sleek, tech-style design was born with simple 
unfolding rollover animations to maximise the 
breadth of content without overwhelming the user. 

Urban Tour had 7.36 million global views in just 11 
weeks and was the third most popular campaign on 
YouTube in 2011 (UK). The campaign has been highly 
lauded, and this summer picked up a Webby award for 
Best use of video and a Gold at Cannes Lions. 
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i i A website is a medium for content on the web, 
which today can be reached by many devices IP IP 


processes involved in a typical large-scales project. 
“Production for large scale projects would typically 
run over a six-month period. Within BBH the structure 
would run as follows: Exec producer, producer, 
creative technologist, UX designer, and designer. This 
production focused team would work alongside the 
traditional agency team of account director, account 
manager, strategist, and the creative team. 

“A project would typically be divided into four 
phases - scoping, design, development, and testing. 
Scoping usually occupies the first 30 per cent of a 
project’s life cycle and delivers UX documents, 
wireframes, statement of work, detailed budgets, 
schedule, tech spec and art direction. 

“Design and development take up the bulk of the 
remaining time, and to a certain extent can run 
parallel and begin a short distance of each other. 

“Testing and release brings the project to a 
conclusion. In the case of a large project, testing will 
be done in conjunction with a third-party specialist to 
ensure the most robust product possible is released.” 

Large scale projects reguire large-scale design and 
development, and a set of tools to match. Powers 
reveals the key components in the process. “Creative 
and design teams still start with good old-fashioned 
sketching, but once we get on screen it’s Adobe 
Creative Suite that dominates. For early prototyping 
we will use Flash or Keynote, or simply design straight 



WEB .www.bartleboglehegarty.com 

FOUNDERS .John Bartle, Nigel Bogle, 

.JohnHegarty 

YEAR FOUNDED .1982 

CURRENT EMPLOYEES .400in London, 

.1000 globally 

LOCATIONS .London, New York, Sao Paulo, 

.Singapore, Shanghai, Mumbai, Los Angeles 


SERVICES 


> User interface design 

> Websites 

> Mobile apps 

> Web marketing 

> Social media marketing 


into browser with sacrificial code. In addition the UX 
team will use Omnigraffle for the creation of user 
flows and wireframing.” 

As a global agency BBH has offices in London, but 
it also has offices in New York, Shanghai, Sao Paulo, 
Singapore, Mumbai and Los Angeles. The global 
infrastructure present a stiff challenge, but the agency 
likes to think of itself as one agency in seven different 
places, producing local, regional and global work for 
some of the world’s most illustrious brands. 

Many BBH client relationships, such as Axe (known 
as Lynx in the UK), are global, and while the different 
offices run their own separate P&Ls, they freguently 
run complex programmes for clients in multiple 
territories. Here the effectiveness of the BBH network 
really comes to the fore. When the different offices 
work together they are able to deliver pretty much 
anything on time and to budget. 

Web campaigns are powered by the latest 
technologies including the big three: HTML5, CSS3 
and jQuery. Head of creative technology Alex 
Matthews reveals how the agency looks to implement 
the newest software. “We are always looking at the 
latest developments in technology for a creative 
technology angle to our advertising. In our industry 
you’ve always got to be careful of chasing the latest 
shiny object that comes along without thinking about 
whether it’s actually useful or necessary - but this is 
not the case for HTML5, CSS3 and jQuery - these are 
tried and tested standards that have stood up to the 
challenges of changing device capabilities over the 
past couple of years. Where these technologies are 
particularly useful is creating highly creative and yet 
highly responsive web interfaces that work across all 
devices. There is still a way to go though, mainly in the 
way that these technologies are implemented in 
mobile devices, and also in allowing access to device 
hardware such as the file system, microphone and 
camera. Well be watching the developments closely.” 

The major technologies provide the behind the 
scenes power, but an agency needs to be fully aware 
of the power of social media and the part it has to play. 
Powers explain how they are now a critical part of any 
campaign that BBH is involved in. “Social platforms 
are a critical part of any campaign, and increasingly of 
any digital product or service BBH creates for its 
clients. Our brands have touch points across so many 
platforms that it’s critical we design with their 
ecosystems in mind - thinking as much about traffic 
drivers and the connective tissue between brand 
properties as we do for the touch points themselves. 
When considering brand ecosystems we are mindful 
of considering offline as well as online. Great use of 


industry Alex Matthews, 

twM head of creative 

lllhlglll technology 



** We would never 
prescribe a responsive 
design methodology for 
creating cross-device 
platforms. However, the 
advent of media queries 
and HTML5 has made 
mobile web interface 
development much 
easier, so we do often 
use this technique ** 


Twitter, Facebook etc can amplify the impact of 
traditional TV advertising enormously. Additionally, 
we understand the importance of playing to the 
strengths of any particular service and having 
empathy for the context/behaviours of a user in it”. 

Devices and platforms dictate and shape how a 
web presence evolves. Matthews reveals how the 
agency likes to break the rules and would never 
prescribe a responsive design methodology. “We are 
always wary of setting rules. In fact we like to break 
rules, so we would never prescribe a responsive 
design methodology for creating cross-device 
platforms. However, the advent of media gueries and 
HTML5 has made mobile web interface development 
much easier, so we do often use this technigue. 

On every campaign we ask ourselves what the best 
way to engage our clients’ customers would be. For 
example, there’s no point creating a store finder app 
when a user could have just typed in the client’s URL 
and had a time/location/device optimised experience 
straight off the bat. On the other hand, we couldn’t 
create a mobile game using web-based technologies”. 

BBH has a vast network of employees spread 
across its global offices, with over 1,000 worldwide 
and 400 in London; and it is these employees that 
drive the agency forward. BBH believes that ‘Great 
work starts with great people’. If you want to work at 
BBH it says you only need two things: be very good at 
what you do, and very nice with it. An ethos that they 
believe they live up to with pride. 


profile. 
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A sense of style 

Fashion and style are emotive and subjective concepts. We picked six examples 



The footer is a multi-talented and 
flexible element of any site. This 
k sites uses a classic font and 
^ colour combo to create an A 
effective dose. 


WHAI I WORE 


Q. 


Hiu.t 


I ■ 




The Selby 

theselby.com 

Development platform Word Press 

The Selby is a visual extravaganza, being image-led 
from start to finish. The design is minimalist with a 
swathe of white creating the site canvas while the 
imagery creates the persona. To complement the crisp, 
clean photography a hand-drawn font is used for titles 
and text while a watercolour effect on the logo adds to 
the illusion to create a credible and stylish site. 


What I Wore 

whatiwore.tumblr.com 

Development platform Tu mbl r 

Black, white and shades of grey are a great 
combination when put together. This site uses them 
all in an effective manner that helps accentuate the 
core content. Neatly weighted text in the sidebar adds 
aesthetic interest as well as functionality. The 
primary focus in every post is the photos, which are 
neatly arranged in grids. 


SF Girl By Bay 

ww w.sfg i rl by bay.com 

Development platform Word Press 

This simple but effective blog boasts all the classic 
elements that define the blog genre. To take it to the next 
level it throws in a splash of colour, style and elegance. 

It is the simplicity that makes the site engaging and 
enthralling. A white background with black text is 
timeless, and the mixture of fonts, font-weight and colours 
ensure that it has an enduring quality. 
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of sites that we think ooze style and substance - and not just in their content. 



ADVERT I 


The drop-down menus are created 
i in bright pink to add a splash of 
k colour, grab the viewers’ k 
attention and complements^ 
the colour scheme. 


The sidebar is populated with a 
selection of advertisers but it 
blends with the rest of the 
L design so the style is not A 
compromised. 
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YvanRodic 

yvanrodic.com 

Development platform HTM L/CSS/JavaScript 

Text is very much a secondary feature on this blog. It 
uses a host of photos and images to tell its story. It is a 
visual diary that uses a responsive framework to 
ensure readers are always getting a glimpse of the 
latest and greatest content. A short title reveals the 
subject of a post and a link to view the complete 
series of shots - again, all text-free. 


LE21EME 

le-21eme.com 

Development platform Word Press 

Black is a colour that has always been associated with 
fashion and style - just think of the little black dress - and 
this site has chosen black as its canvas. By contrast, the 
logo is white and uses a contemporary font to reinforce a 
modern message. A selection of black and white and full 
colour images add mood and excitement in equal 
measures, as they stand out from the background. 


Lobster and Swan 

blog.lobsterandswan.com 

Development platform Word Press 

Simple and stylish describe the essence of this site. 
There is nothing too clever that distracts the viewer, 
just a great combination of text, colour and photos. A 
featured image slider takes centre-stage, introducing 
the persona of the brand. The layout is standard 
two-column fare, but the use of complementary 
images and classic serif fonts adds to the ambience. 
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Design and develop 
your own WordPress 
theme from scratch 
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W ordPress is the world’s largest CMS. The 
platform has achieved to this position for 
a number of reasons, but a huge one is 
that it is really easy to build themes and 
plug-ins for WordPress. Anyone with 
knowledge of HTML and CSS, as well as 
some notion of PHP, will be able to get a simple 
WordPress theme together. In this article we’ll do just 
that - build a WordPress theme from scratch. You can 
use this theme as the basis for your continued 
WordPress experiments, as a basis for future 
projects, or just as an inspiration. First, we’ll discuss 
the tools at hand. In the case of WordPress themes, 
that means HTML, CSS, and PHP, as well as plain old 
image files. The PHP part in this mix is actually 
functions supplied from WordPress - you don’t need 
to be fluent in PHP to create a WordPress theme. The 
template tags available may be PHP that does various 
things, and the way you pass parameters to the 
template tags is very much like PHP, but no true PHP 
knowledge is needed. That said, if you know the 
basics this’ll be a lot easier. 

Second, after we’ve talked about template tags, 
we’ll establish what we’re building. The theme we’ll 
build will be a simple one, with minimal markup and 
CSS so we can focus on the WordPress parts rather 
than small details. 

Finally, we’ll go through the motions of putting the 
theme together, one file at a time. In the end, you’ll 
have a fully-functional theme to continue working on. 
Let’s get started! 



TAILORMADE WOftDPRESS THEMES 


THEME STRUCTURE 

WordPress themes consist of template files, as well as 
the necessary stylesheets, images, and similar things 
that make up a website. The theme doesn’t contain 
any content (but could have a language file for 
internationalisation), that sits in the WordPress 
database, nor any images, videos and so on that are 
part of the content. Basically, the theme is the design 
of your WordPress site, and through it you can 
control how your content is presented. 

Themes belong in wp-content/themes/, in their 
own folder. This folder must contain a style.css, which 
has a theme header that has the necessary 
information WordPress needs to identify this as a 
theme, and an index.php. Usually there are more files 
than that. These are the ones we’ll have in our theme: 

* style.css - theme declaration and CSS 

* index.php - main fallback template 

* header.php - the site header 

* footer.php - the site footer 

* sidebar.php - the side column 

* single.php - for single posts 

* page.php - for single pages 

* archive.php - for various types of archives 

* content.php - code for outputting content 

* content-single.php - code for outputting content 
on single posts 

* content-page.php - code that can be used for 
outputting content on pages 

* nav-bottom.php - code for including navigational 
elements in your theme 

* comments.php - the comment code 

* functions.php - code that can be used for 
registering features and functions 

* screenshot.png - for admin purposes 

It is important to remember that while this is a 
common setup for themes in terms of template files, 
some themes won’t have all these files, and some will 
have a lot more. In fact, most will be a ton of files, 
with everything from images and additional 
stylesheets, to JavaScript libraries and template files 
for every possible view in WordPress. 

TEMPLATE TAGS AND CODE 

Most of the theme template files consist of traditional 
HTML markup, with CSS classes and IDs, as well as 
some PHP code. The PHP code can obviously be just 
about anything, but for our purposes we’ll just stick 
with the WordPress parts. This, by the way, is usually 
a pretty good idea. Unless you have a really good 
reason you shouldn’t try and do what WordPress 
already has functions for with PHP. Stick to the 
WordPress way and you’re less likely to run into 
weird issues down the road. 

As noted previously, you really don’t need to be all 
that familiar with PHP to create your first theme. That 
is because WordPress has something called template 
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Above: When we’re done, your theme will even work with the new customisation options for themes 


tags. Template tags are basically wrappers 
containing PHP code that will do things for you. For 
example, outputting the site title in plain text, or 
giving you a list of tags for a post. Besides being 
really convenient when building themes, this method 
also means that you don’t really have to understand 
the underlying PHP that spits out that linked list of 
tags for a post; all you need to know is which 
template tag to use, and how to send the proper 
parameters to it so that it returns what you want. 

Some template tags won’t take parameters. That 
means that they just work as is, while others can take 
parameters. The ones that do take parameters are 
obviously of the sort that you would want to alter 
their output. Let’s take a look at two different 
template tags. First, here’s bloginfoO, which can be 
used to output the site URL, site title, and so on. Let’s 
say we want the site title: 

001 <?php bloginfo( ‘title’ ); ?> 

That’s it. Wherever we put that, WordPress will output 
the site title (which you can change in the WordPress 
admin interface, under Settings>General). The stuff 
within the parenthesis, the ‘title’ part, is the 
parameter - a single one here. 

Some template tags will take multiple parameters. 
Let’s take a look at the template tag for outputting 
the tags for a post: 

002 <?php the_tags(); ?> 

This code will output a list of linked tags belonging to 
the post in question. The list will be comma 


r -WHAT ABOUT CHILD THEMES? - 

Child themes are themes that borrow from their i 
parent theme. Any theme can be a parent theme, 
and the child theme will then inherit everything 
from the chosen parent theme. That means that 
the child theme will get every bit of CSS, all the 
code; everything, really. The good part is this: 
everything that you put inside the child theme 
will take precedence over its counterpart in the 
parent theme. Want a different template for 
pages? Just include a page.php template file in 
your child theme and WordPress will use that 
one instead of the one in the parent theme. 

Child themes have their own folders in 
wp-content/themes/ just like all other themes. 

The only thing that sets them apart is that the 
themes themselves are incomplete (if they’re not 
then they really shouldn’t be child themes) 
because they borrow from their parent theme. 

The style.css file in the child theme will dictate 
which theme is the parent theme. This is a very 
handy tool for modifying existing themes 
without having to fork them, and thus you can 
continue to update the parent theme without 
risking loosing any of your alterations. 

When you’ve got your head around 
WordPress theming, you should definitely learn I 
more about child themes. I recommend the 
WordPress Codex page on child themes codex. 
wordpress.org/Child_Themes, as well as the 
latest edition of my book Smashing WordPress: 
Beyond the Blog for an in-depth look. 
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004 <?php the_tags( $before, $sep, $after ); ?: 


005 <?php the tags( ‘Topics 


&bull 


&bull; <a href=”/topics”>View all</a>’ ); ?> 




4.1 start writing HTML and CSS. In some cases I’ll do 
an HTML version first, and then convert that to a 
WordPress theme, but most of the time I will just set 
up the CSS file (style.css) in this step and move along. 
After all, I’ve done tons of themes by now. 

5.1 start writing the code for my theme. 


As you no doubt have seen, the markup for this 
theme is HTML5. That means that this theme won’t 
perform well on older web browsers, which in 
effect means anything below Internet Explorer 9. If 
you want to add support for these, additional 
stylesheets for IE would be needed. We will be 
including a simple JavaScript that takes care of 
some of the HTML 5 issues in IE versions prior to 9, 
but chances are that won’t be enough. I’m afraid 
you’re on your own there, for now, as this tutorial 


focuses on the WordPress parts and not making 
code work in inferior and outdated web browsers. 

If you really, really want this theme with support 
for Internet Explorer version 7 and 8, ping @tdh on 
Twitter and I’ll release an updated version on the 
theme homepage: tdh.me/wordpress/kihon. 

If you ask really nicely, I might even add support 
for Post Formats and make the whole thing 
responsive for you. But then, you’d better be really, 
really nice...! 


The theme we’re building will be very simple. The 
purpose of this article isn’t to teach you how to write 
fancy stuff in CSS and HTML, nor do annoying jQuery 
transitions. It’s to show how easy it is to create a 
WordPress theme - we’ll stick to a basic design. 

First there’s the header - the top of the site with a 
site title (or logo) and a simple horizontal menu. The 
left column is the content column, and then we’ll 
have a side column to the right. Finally, we’ll wrap 
everything up with a footer. 

Now, WordPress has some useful features, such as 
widgets and menus. We’ll put both of them to good 
use, with the horizontal menu in the header, and the 
right column will consist solely of a widget area. We’ll 
also enable custom background colours and support 
a header image as a logo. 

The markup will be simple. This is the basic layout 
markup, which will then consist of actual content: 


separated, and the text “Tags: 
list. That’s the default values of the three parameters 
this template tag can take, so while we didn’t add any, 
what it really says is this: 


will be in front of the 


It is popular to call themes that are meant for 
you to build upon ‘theme frameworks’. In most 
cases however, this is a slightly misleading 
nomenclature, because although some themes 
are more suitable to build upon than others, all 
themes are in fact possible to use as a basis for 
a theme. I’d venture so far as to call most 
theme frameworks starter themes instead, as 
it is closer to the truth. 

Starter themes are themes that are suitable 
for you to start your project on, which means 
that you could either just fork them or create a 
child theme for the theme of your choice. 
Below is a list of nice starter themes for you to 
consider should you not want to build your 
theme base yourself. 


The first parameter is what goes before the linked tag 
list, the second is how the tags are separated (comma 
and a space above), the third is what goes after the 
list (which is nothing). Or: 


Let’s say we wanted the tag list to say ‘Topics: ‘ in 
front, be separated by bullets, and have a link after: 


* _S starter theme: underscores.me 

* Roots: www.rootstheme.com 

* Bones: themble.com/bones 

* Thematic: wordpress.org/extend/themes/ 
thematic 

* Hybrid Core: themehybrid.com/hybrid-core 

* Starkers: viewportindustries.com/products/ 
starke rs 


&bull; is the proper code for a bullet. It also sits 
before the link in the $after parameter since the $sep 
only separates tags in the list, not what comes before 
it or after it. 

Not too complicated, right? The WordPress Codex 
has a list of all available template tags, along with 
pages with examples: codex.wordpress.org/ 
Template_Tags. 


Enough theory, let’s take a look at what kind of theme 
we’re building here. While you could just start writing 
code, I believe you’ll get a better result if you think 
things through first. The preparations you feel you 
need to be doing all depend on your workflow. 

Personally, I tend to do this: 


This is easily translated to the following, when 
applied to the sketch I’ve made: 


1.1 come up with some sort of idea of what I’m doing. 
This could be anything from a colour palette I want to 
use, to a specific type of site that I want to build. 

2.1 draw some boxes on a paper. You might draw 
proper wireframes, use your iPad, or draw the design 
in Photoshop. I rarely bother with exact grids here, 
but chances are it sits in the back of my head. 

3.1 mock up as much of the design that I feel I want 
and need for the project. 


A. #header-container 

B. #header-navigation (within #header-container) 

C. #content-container 

D. #sidebar-container 

E. #footer-container 


Let’s get building! 


001 

<div id=”outer-wrap”> 

002 <div id=”inner-wrap”> 

003 

004 

<header id=”header-container”> 

005 

<!— Site Logo —> 

006 

<nav id=”header-navigation”x/nav> 

007 

</header> 

|008 

009 

<section id=”content-container”> 

010 

<!— Main Content — > 

011 

</section> 

1012 

013 

<aside id=”sidebar-container”> 

014" 

<!— Right Column — > 

015 

</aside> 

1016 


017 

<footer id=”footer-container”> 

018' 

<!— Footer —> 

019 

</footer> 

020 

021 </div><!— #inner-wrap —> 

|022 

</div><!— #outer-wrap —> 
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012 $site description = get bloginfo( 


description’, ‘display’ ) 


013 if ( $site description && ( is home() || 


is front page() ) ) 


014 echo “ | $site description’ 


016 // Add a page number if necessary 


sprintf( ‘Page %s’, max( 


$paged, $page ) ) 


020 </title> 


001 <!DOCTYPE html> 


002 <html <?php language attributes(); ?» 


004 <head> 


|01 <link rel=”stylesheet” type=”text/ 


<meta charset=”utf-8”> 


css” media=”all” href=”<?php bloginfo( 


<meta name=”description” content=”<?php 


stylesheet url’ ); ?>” /> 


|02 <link rel=”pingback” href=”<?php 


bloginfo( ‘description’ ); ?>’ 


<meta name=”author” content=”<?php 


]bloginfo( ‘pingback url’ ); ?>” /> 


bloginfo( ‘name’ ); ?>”> 


|04 <script src=”http://html5shiv.googlecode 


<meta name=”viewport” content=”initial 


scale = l,user-scalable=no,maximum- 


]com/svn/trunk/html5. js”x/script> 


'05 <! [endif]— > 


009 <meta name=”HandheldFriendly’ 


:ontent=”true”/> 


// Queue threaded comment JavaScript 


if ( is singular() && get option( 


thread comments’ ) ) 


wp enqueue script( ‘comment-reply 


-001 <nav id=”header-navigation”> 


003 // Based on Twenty Eleven 


004 global $page, $paged 


|06 // Kick off WordPress 


// Main navigation 


006 wp title( ‘| 


wp nav menu( array( ‘theme location 


true 


: > ‘main-menu 


10 </head> 


// Add the blog name 


bloginfo( ‘name’ ) 


'006 </nav> 


011 // Add the blog description for the home/ 


;007 </header> 


front page 


I usually start by creating the theme declaration in 
style.css, but since I just leave that sitting there 
while building the rest of the primary theme 
structure within the template files, we’ll leave that 
for last. It makes sense to start with header.php - it 
is the file that consists of the site header after all. It 
is also the file with all the necessary declarations 
and includes in the head area, which makes it 
pretty important. Let’s go through creating this file 
in chunks, step by step. 


apply all necessary CSS to the body tag. Don’t 
forget that one! 

We want to make it possible to upload a header 
image, - a logo for example - but should there not 
be one we’ll just output the site title and description 
as they appear in Settings>General. Now, this is a 
little tricky because we haven’t actually registered 
support for headers yet - that is something we’ll do 
in functions.php, so you’re going to have to refer to 
this code again when we get to that. The code for 
this step can be found on the resource disc. 


01 Getting the meta right 

We’ll start from the top, with the HTML 
declaration and the necessary meta. This is pretty 
basic stuff so let’s breeze on through so we can get 
to the meaty stuff. The only WordPress-y thing 
about it is that we’re using bloginfoO for obtaining 
the site description and name. 


The stylesheet 

We need to include our stylesheet, which is 
style.css of course. While we’re at it we’ll also add 
support for pingback so that other blogs and sites 
realise they can ping us, and include the HTML5 
supporting JavaScript for Internet Explorer 
versions prior to 9. Aside from the bloginfoO usage, 
this is pretty standard stuff. 


04 Wrapping up the head 

We’re almost there with the head part. First, 
we want to make the comment-reply JavaScript 
available on single posts and pages. This is 
necessary for making threaded comments work. 
We also need to kick off WordPress with wp_headO 
as the last thing we do in head. 


02 The title tag 

Since this header file will be used on every 
location on the site, the title tag should reflect that. 
Twenty Eleven has an excellent solution for 
showing the right things in the title tag, which 
would be the post or page title should you be on a 
post or page, or the site description if you’re on the 
front page. The site title is going to be there all the 
time, obviously. 


06 The menu, and wrapping 
™ things up 

The last part of the header.php file is including the 
menu, which we’ll also have to declare in functions, 
php. The themejocation parameter tells us which 
menu will be displayed here, which is important if 
you have more than one. In our case, it is the one 
called main-menu. We’ll get to that in functions.php 
as well. Finally, we’ll close the header tag and be 
done with header.php. 


05 The header title or image 

First of all, this is where we start the body 
tag, which needs the body_class() template tag to 
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SIDEBAR 
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The sidebar.php template is really simple too. All 
we want it to contain is the necessary markup, so 
we need to position it where we want it, and the 
code for making the widget area will then 
appear. The actual registration of the widget 
area is done in functions.php, so in essence this 
is basically just a placeholder. 

The code we’re using for sidebar.php is the 
#sidebar-container aside tag, and within it we 
have a ul. That is because we’ll construct our 
sidebar to be a unordered list, which is 
something you can choose to do when you 
create it in functions.php. This is the common 
way to do it, making each widget dropped into 
the widget area reside within a li, that belongs 
within the unordered list. However, some prefer 
divs or even a bunch of asides rather than the 
old method. Which way you go is up to you, but 
since widget areas tend to be lists of things, I 
think using lists makes sense. 

Anyway, the template tag used to call up 
widget areas is called dynamic_sidebar() and all 
you have to do is to pass the name of the sidebar 
you want to display to it. In our case, that is 
primary-right-column, which also happens to be 
the only widget area we’ve got. 

001 <aside id=”sidebar-container”> 

002 <ul id=”sidebar-widgets”> 

003 <?php dynamic_sidebar( ‘primary- 
right-column’ ); ?> 

004 </ul> 

005 </aside> 

I_I 



- CREATING THE FOOTER - 


Let’s move along with the footer. This template 
sometimes includes widget areas or other fancy 
stuff, but we’re keeping it simple. The important 
part with footer.php is that you really should make 
sure you have wp_footer() just before you close the 
body tag. This tells WordPress that we’re done with 
the page, and also gives developers a great 
opportunity to hook on to the bottom of the page 
for including or executing things, whatever it 
might be. Don’t forget wp_footer() is the important 
thing you need to take away from this. 

® The actual footer 

The footer for this theme is simple enough, 
it is just a line of text with some links in it. You’ll 
remember home_url() from header.php perhaps, a 
template tag (that you need to echo to actually 


output) which points to the root of your WordPress 
site. If you need to get the root of the WordPress 
installation, which often is the same as your site but 
not always, you could use site_url() ins 

001 <footer id=”footer-container”> 

002 <p> 

003 <a href=”<?php echo home_url(); 

?>” title=”<?php bloginfo( ‘title’); 

?>”><?php bloginfo( ‘title’); ?></a> is 
powered by <a href=”http://wordpress. 
org” title=”WordPress”>WordPress</a> and 
<a href=”http://tdh.me/wordpress/kihon/” 
title=”Kihon”>Kihon</a> by <a href=”http:// 
tdh.me” title=”TDH”>TDH</a> 

004 </p> 

005 </footer> 


Wrapping up the footer 

Finally, we’ll close all the necessary tags, the 
#outer-wrap and #inner-wrap divs from header.php, 
and then we’ll have wp_footer() just before closing 
the body tag as well. Like I said, we’re going to keep 
this one really simple, so that’s it! 

001 </div><!— #inner-wrap —> 

002 </div><!— #outer-wrap —> 

003 

004 <?php wp_footer(); ?> 

005 

006 </body> 

007 

008 </html> 
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one page. So if the loop contains 15 results but you 
have set WordPress to only display ten per page, 
then you’ll get these navigational links. Pretty 
simple, and a nice example of when get_template_ 
partO is useful, since the code within nav-bottom. 
php is needed on just about any archive page. 


04 Wrapping up index.php 

To wrap up index.php, we’ll close the section 
element. However, we also want to include the 
sidebar.php template, which contains our right 
column, which we’ll do with get_sidebar(). Finally, 
we want to wrap up the whole page with footer, 
php, so we’ll call that with get_footer(). 


INDEX 


001 <?php 

002 // index.php is the fallback template 
003 

004 // Include header.php 
005 get_header(); 

006 ?> 

007 ~ 

008 <section id=”content-container”> 
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We’re getting close to a theme that will actually 
work now. The index.php template is the main 
fallback template for everything, so whenever 
there isn’t a dedicated template file for something, 
this will be used. Let’s dive right into it, shall we? 

01 The top 

The first thing we’ve got in this template, 
and just about any other template file that works 
with the actual content, is the inclusion of header, 
php with get_header(). 


(i , Looping it 

™ Content in WordPress is outputted using the 
loop. Here’s the most basic one, starting with while 
( have_posts()): the_post(). You can create your 
own loops and do things different from this, but 


05 A look at nav-bottom.php 

Before we move along, let’s have a quick 
look at the contents of nav-bottom.php. We called 
it in step 3, as I’m sure you remember. This code 
will only be interesting if the loop, here 
represented by calling $wp_query, has more than 


001 <?php 

002 // When possible, display navigation 

at the bottom 

003 if ( $wp_query->max_num_pages > 1 ) : 

?> 

004 <div id=”nav-below” 

class=”navigation”> 

005 <div class=”nav-previous”> 

006 <?php next_posts_link( ‘<span 

class=”meta-nav”>&larr;</span> Older posts’ 

); ?> ~ 

007 </div> 

008 <div class=”nav-next”> 

009 <?php previous_posts_link( ‘Newer 

posts <span class=”meta-nav”>&rarr;</span>’ 

); ?> ~ 

010 </div> 

011 </div> 

012 <?php endif; ?> 


02 4 04s 

We don’t have a 404.php template, so 
index.php will handle that. By checking if 
have_posts() lack any posts we can figure out if a 
non-existent page is being accessed. Should that 
be the case, we’ll output a short message (that 
really should be a lot more helpful to the lost 
visitor) and fetch the search form with get_search_ 
formO. You can have your own search form by 
creating a searchform.php template file with your 
form, or you can rely on the default one, which 
we’re doing here for now. 


001 <?php 

002 // 404 Page Not Found or empty 

archives etc. 

003 if ( !have_posts() ) : ?> 

004 <article id=”post-0” class=”post error404 
not-found”> 

005 <hl class=”entry-title”>Not Found</hl> 

006 <div class=”entry-content”> 

007 <p>Sorry, there is nothing here. You 
might want to try and search for whatever it 
was you were looking for?</p> 

008 <?php get_search_form(); ?> 

009 </div> 

010 </article> 

011 <?php 
012 endif; 


this is the basic one. As long as there are posts to 
loop, up to the amount you’ve set in 
Settings>Reading, the loop will loop out the posts. 

Now, you’ll see two get_template_part() tags. 

The first is looking for content-index.php and the 
second wants nav-bottom.php. When using get_ 
template_part(), the first parameter is the fallback, 
so should content-index.php not exist, it will revert 
to just content.php. The second parameter adds 
the index part in content-index.php. The same 
goes for nav-bottom.php - should it not exist, it will 
look for just nav.php. This is a very handy way of 
preparing a theme for dedicated template parts, 
but with fallbacks to make sure it actually works. 

So, to recap: the loop is looping a number of 
posts, which will be dictated by the contents of 
content-index.php. This is something we’ll look 
closer at in the next section. 


001 

// The basic loop 

002 

while ( have posts() ) : the post(); 

003 


004 

// Load the appropriate content template 

005 

get template part( ‘content’, ‘index’ ); 

006 


007 

// End the loop 

008 

endwhile; 

009 


010 

// Navigation top 

011 

get template part( ‘nav’, ‘bottom’ ); 

012 

?> 


,001 

</section> 

002 


003 

<?php 

5004 

// Include sidebar.php 

005 

get sidebar(); 

006 


007 

// Include header.php 

008 

get footer(); 

009 

?> _ 








































































'el=”bookmark”> 


Continue reading &rarr 


</div> 


018 </div> 


002 // For archives and search results, use 


:he excerpt() 


003 if ( is home() || is front page() || 


is archive() || is search() ) : ?> 


004 <div class=”entry-summary”> 


<?php the excerpt(); ?> 


<div class=”read-more”> 


archive listing. The is_singular() conditional tag tells 
us this, because it will only return true if the page in 
question is meant for only one piece of content. 

We use the_permalink() to get the link to the post 
should we need it, the_title() to output the post title, 
and the_title_attribute() to get a suitable title for the 
title tag. Lots of titles there. 


By separating the content that youTl output from 
every template file, it’ll be easier to reuse the code. 
In this theme, we use get_template_part() to fetch 
the appropriate content-X.php file, where X is the 
type of content we want. That means that single 
posts, controlled by the single.php template, will 
look for content-single.php, and pages will want 
content-page.php. Should they not exist, they’ll 
revert to content.php. Much like index.php is the 
main fallback template file, content.php is the 
fallback file for all content. So, let’s go ahead and 
take a look at that. 

Before we dive in, it is important to remember 
that content can either be in a list, or all by itself on 
a dedicated page (like a post, for example). Since 
content.php needs to be able to handle both, we 
take that into account. 


jtk For single posts and pages 

Everything that isn’t an archive is obviously 
a single view of some sort. Here we use 
the_content() instead of the_excerpt() to fetch the 
content, which means we’ll get all the main content. 
Sometimes that can be split up into several pages 
(although it is a nasty habit that should be avoided), 
so we have wp_link_pages() to manage that. 


01 The content header 

We place all content in an article tag which 
has a post_class() template tag within. This is to 
make sure that WordPress is able to apply the 
necessary styles. 

Moving on, the title of the content sits in a 
header tag, which will either output an hi or an h2, 
depending if this is a post or page, or some sort of 


£ For archives 

Next, we differentiate how we output the 
main content depending on wether it is an archive 
of some sort, or a single post. Here we have several 
conditional tags, like is_archive() and is_search() - 
all pretty self explanatory. With the_excerpt(), we’ll 
only get a 55 word excerpt from our posts, or 
whatever’s been filled in to the excerpt field on the 
Edit Post screen in the admin interface. 


04 Comments only on singulars 

Finally, single posts and pages might have 
comments that we want to show off. The 
is_singular() conditional tag will only output the 
commentsJemplateO if it returns true, so that way 
we can make sure that comments won’t show up 
on any archives. 


The theme with a custom header and 
background 


001 

<article id=”post-<?php the ID(); ?>” 


<?php post class(); ?» 


002 <?php if ( is singular() ) { ?> 


003 

<header class=”entry-header”> 


004 

<hl class=”entry-title”> 


005 

<?php the title(); ?> 


006 

</hl> 


007 <?php } else { ?> 


008 

<h2 class=”entry-title”> 


009 

<a href=”<?php the permalink(); 


?>” 

title=”<?php the title attribute(); ?: 

>” 

rel= 

-”bookmark”> 


010 

<?php the title(); ?> 


011 

</a> 


012 

</h2> 


013 

<?php } ?> 


014 

</header> 



007 

<?php 

008 

// If the comments are open 

we’ll 

need the comments template 

009 

if (comments open()) { ?> 

010 

<span class=”comments-link”> 

011 

<?php comments popup link( 

‘Leave 

a comment’, ‘1 comment’, ‘% comments’ 

); ?> 

012 

</span> &bull; 

013 

<?php } ?> 

014 

<a href=”<?php the permalink(); 

?>” title=”<?php the_title_attribute(); ?>” 


001 

// Comments only on single posts 

002 

if ( is singular() ) { 

003 

comments template( ", true ); 

004 

} 

005 

?> 

006 

</article> 


001 

Q. 

-C 

Q_ 

C” 

V 

002 

// For everything else 

003 

else : ?> 

004 

<div class=”entry-content”> 

005 

<?php the content(); ?> 

006 

<?php wp link pages( array( 

007 

‘before’ => ‘<div class-’page- 

link”>Pages:’, 

008 

‘after’ => ‘</div>’ 

009 

) 

010 

); ?> 

011 

A 

CL 

< 

V 

012 <?php endif; 



































































TAILORMADE WORDPRESS THEMES 



001 // COMMENT CALLBACK 

002 function kihon_comment($comment, $args, 

$depth) { 


003 

$GLOBALS[‘comment’] = $comment; ?> 

|004 

<li <?php comment class(); ?> id=”li- 

comment-<?php comment ID() ?>”> 

005 

<div id=”comment-<?php comment. 

ID(); 

?>” class=”comment-body”> 

006 

<div class=”comment-author vcard”> 

007 

<?php echo get avatar($comment, 

|$size= 

’32’,$default=’<path to url>’ ); ?> 

|008 

<?php printf( 

(‘<cite class=”fn”>%s</cite> <span 

|class= 

”says”>says:</span>’), get comment 

[author 

link()) ?> 

009 

</div> 

010 

<?php if ($comment->comment 

approved == ‘0’) : ?> 

|011 

<emx?php e(‘Your comment is 

awaiting moderation.’) ?x/em> 

012 

<br /> 

013 

<?php endif; ?> 

[014 

|015 

<div class=”comment-meta 


commentmetadata”xa href=”<?php echo 
htmlspecialchars( get_comment_link( 

$comment->comment_ID ) ) ?>”x?php printf(_ 

(‘%l$s at %2$s’), get_comment_date(), get_ 
comment_time()) ?X/aX?php edit_comment_ 
link(_(‘(Edit)’),’ ‘,”) ?x/div> 

joTcT^_ 

j017 <?php comment_text() ?> 

018 

[019 <div class=”reply”> 

1020 <?php comment_reply_link(array_ 

merge( $args, array(‘depth’ => $depth, ‘max_ 
[depth’ => $args[‘max depth’]))) ?> 

[021 </div> 

|022 </div> 

023 <?php } 

024 

1025 ?> 


001 /* _ 

002 Theme Name: Kihon 
003 Theme URI: http://tdh.me/wordpress/ 
kihon/ 

004 Author: Thord Daniel Hedengren 
005 Author URI: http://tdh.me 
006 Description: A simple theme meant 
as a foundation for your adventures in 
the WordPress world. 

007 Version: 1.0 

008 License: GNU General Public License 
v2 or later 

009 License URI: http://www.gnu.org/ 
licenses/gpl-2.0.html 
010 Tags: light, two-columns, right- 
sidebar, fixed-width, custom-background, 
custom-header, custom-menu, sticky-post 
*/ 


011 

‘before.title’ => ‘<h3 

class=”widget-title”>’, 

012 

‘after.title’ => ‘</h3>’ 

013 

) ); 

014 


015 

} 


1001 // REGISTER SIDEBARS 

1002 function kihon_widgets_init() { 

003 

1004 // Primary right column 

005 register_sidebar( array( 

J006 ‘name’ => ‘Primary Right Column’, 

007 ‘id’ => ‘primary-right-column’, 

58 ‘description’ => ‘The primary right 

:olumn.’, 

[009 ‘before_widget’ => ‘<li id=”%l$s” 

class=”widget-container %2$s”>’, 

010 ‘after widget’ => ‘</li>’, 


Every theme needs a style.css file, and it is 
important that the top of it is formatted in a 
way that WordPress can understand. This is 
where the theme information goes, the part 
that you’ll see when visiting Appearance> 
Themes in the admin interface. Some themes 
have more information than others, the Tags: 
line is only for the wordpress.org themes 
repository, for example. 

Below is the theme header in style.css for 
our theme. I’ve named it Kihon, which is 
Japanese and means ‘foundation’, as this is 
meant to be something of a foundation for 
curious web developers who want to step 
into WordPress theming. Kind of nice, don’t 
you think? 

The theme header is the only thing that is 
dictated by WordPress when it comes to 
style.css. Once you get below it you can 
happily CSS away in any which way you 
want. There are a bunch of classes that you 
should support though, for images and the 
like, so you might want to refer to this page 
and make sure your stylesheet is able to 
manage all situations: 
codex.wordpress.org/CSS#WordPress, 
GeneratedClasses 


03 Comment callback 

Now we’ve got the comment callback part. 
This is trickier, and as we don’t have room to 
delve into the comments.php template, we’ll just 
breeze it. kihon_comment() is called by wp_list_ ■ 
commentsO in comments.php to control how 
comments are displayed. Refer to comments.php 
in the theme and you’ll see how it connects. 

Finally, as we started with a <?php tag, we need 
to close it. And that’s it for our functions.php file. 


Oi Setting up the theme 

The first thing we need to do is set up the 
theme, which is to say we create a function with 
features that we want the theme to have, and 
then we hook that to after_setup_theme with 
add_action(). 

Within the function, kihon_setup(), you’ll find 
the features we’re adding. Here you’ll find the 
header image, with a bunch of settings such as 
flexible width and height (but recommended 
sizes), as well as the menu, register_nav_menu(), 
which creates the menu we called in header.php. 
The custom background feature will let us be able 
to detect RSS feeds. 


02 Creating the widget area 

Next we have the widget area. This also 
sits within a function, called kihon_widgets_init(), 
and we hook it onto widgetsjnit with add_ 
actionO. Widget areas, or sidebars, are registered 
with register_sidebar(), which takes a number of 
things within an array. Name, ID, what goes before 
every widget and what comes after it, and so on. 
This is where you can see that widgets sits in li 
tags, which we talked about previously. 


016 add_action( ‘widgets_init’, ‘kihon_ 
widgets_init’ ); 


STYLE FUNCTIONS 


The functions.php file is meant for activating 
features and adding additional functionality. It is 
a very powerful tool, and you can do almost 
anything with it. We’ll only touch on it briefly 
here, because frankly it is a huge topic that 
deserves an article of its own. 

Some things that we’re doing here in the 
functions file connects to things we’ve done 
before, like the header image and menu in 
header.php, and the widget area in sidebar.php. 
You might want to refer to these sections. 
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4 responses to f-feHo wcrft?. 1 


That’s it - Kihon is done! 

No, wait, it isn’t. Themes are almost never done, 
they are merely works in progress. This theme might 
be in working order right now, but it isn’t done. When 
browsing through the theme files, you’ll no doubt 
note that there are more files there than we went 
through here. Most notably, single.php and 
content-single.php, as well as page.php and its 
content-page.php, not to mention comments.php. By 
now you should have enough knowledge to be more 
than able to wade your way through these files and 
start making changes on your own. 

There are features to be added to Kihon that we 
couldn’t fit this time, such as featured images for 
posts, for example. The theme should also be 
responsive, so there’s that to take into account, and 
don’t you think you should have more flexible 
sidebars? Also, this theme would do well with support 
for at least some Post Format. 

There are always things to do, as I’m sure you 
know as a web developer, but when it comes to 
WordPress it is ridiculously true. Just you wait - a 
future version of the platform will no doubt add 
additional features that you’ll want to use with your 
own creations. 

I urge you to dive into the Kihon code, learn what 
you can and take what you like for your own projects. 

I also recommend looking at the default themes that 
come with WordPress. They adhere to WordPress 
coding standards and are a great way to learn more. 


Above: No sticky post here, just a content flow 


Additional reading: 

• Theme Development: codex.wordpress. 
org/Theme_Development. 

• Thord’s book, Smashing WordPress: Beyond 
the Blog : tdh.me/books/smashing- 
wordpress-beyond-the-blog-3rd-edition. 


Above: Testing image alignments 


Useful tools for theme development: 

• Theme Unit Test XML file: codex.wordpress. 
org/Theme_Unit_Test. 

• The Theme-Check plug-in: wordpress.org/ 
extend/plugins/theme-check. 


WordPress for Beginners 

• There are lots more tools, tips and themes for 
you to get to grips with on offer in Imagine’s 
WordPress for Beginners Bookazine. 

Whether you’re preparing to roll out an 
eCommerce site, or simply want to sprinkle 
some extra widgets on your page, WordPress 
for Beginners will teach you everything you 
need to know. It’s available now for £11.69 via 
www.imagineshop.co.uk. 


Above: A single post with some comments 


feature 
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tutorials 


Build a news 
content 
switcher with 
jQuery & CSS3 

Using the Top Headlines content 
switcher at globalnews.ca as 

inspiration, here’s how to build your 
own with jQuery and CSS3 

tools I tecli I trends JavaScript, jQuery, CSS3 
expert Louis Lazaris 




here are hundreds of scripts and 
plug-ins online for content sliders 
using JavaScript. Most of those 
scripts are for image-heavy content 
that is geared to making a visual 
impression. This one is a little 
different. The idea for this tutorial 
comes from a content switcher that, 
at the time of writing, appears on the 
homepage for globalnews.ca (a 
Canadian news network). In this tutorial, we will be 
recreating that widget. 

This content switcher is text-heavy and is focused on 
displaying the latest top headlines for that day. It has a 
vertical list of headlines, along with a lava lamp-like 
effect where a white bar highlights the currently visible 
news story. In addition to allowing the user to click to 
view any headline, the highlight bar animates 
automatically, cycling through all the available items. 

The version on globalnews.ca uses JavaScript for 
the white bar animation, and the widget isn’t responsive. 
Well improve on that by making ours responsive and 
use CSS3 transitions for the lava lamp effect. 

If you’d like to fiddle with the full code for this widget 
online, you can view it at this JS Bin: jsbin.com/ 
utaneq/48/edit, or use the files with this tutorial. 



The headlines list 

The first thing we’ll do is establish some clean, 
semantic markup to hold the content that our script will 
manipulate. We’ll start with a simple unordered list, with 
the last item being a special “highlight item” that we’ll 
use to create the lava lamp effect. We’ll also have a 
default “selected” list item, and we’ll throw in a couple of 
phony news headlines. 

001 <ul class=”news-headlines"> 

002 <li class="selected">100 red 
bicycles stolen from local bike store</ 
li> 

003 <li>New leash laws in effect 
for floppy-eared dogs</li> 

004 <li>Insider: Can palm trees be 
saved?</li> 

005 <li>Fresh recipes to titillate 
the taste buds</li> 

006 <li>Truck inspections under way 
for the metropolitan area</li> 

007 <li>Are the beaches safe for 
swimming this year?</li> 

008 <li class=”highlight”x/li> 

009 </ul> 

The news preview 

The right-side of our widget will hold the 
individual news items. They’ll each have an image, 
some text, and some CSS classes for styling and 


scripting purposes. Our example will consist of six news 
items. Here’s how each item will be marked up: 

001 <div class=”news-content top- 
content'^ 

002 <img src=”images/newsl.jpg" 

width=''220'' height=”143” alt="100 red 
bicycles stolen from local bike store"> 
003 <p><a href="#">100 red 

bicycles stolen from local bike store</ 
ax/p> 

004 

005 <p>Pellentesque habitant 

morbi tristique senectus et netus et 
malesuada fames ac turpis egestas.</p> 
006 </div> 

Fixed box model 

To ensure width calculations are more intuitive, 
we’ll set the box-sizing property, along with some 
universal margin and padding resets (which will usually 
be done in a CSS reset, so you likely won’t need this): 


001 * 

002 

{ 

margin: 0; 

003 

padding: 0; 

004 

-webkit-box-sizing: border-box; 

005 

-moz-box-sizing: border-box; 

006 

box-sizing: border-box; 

007 } 
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Build a news content switcher with j Query & CSS3 


■ New leash laws in effect for 
floppy-eared dogs 

■ Insider: Can palm trees be 
saved? 

■ Fresh recipes to titillate the 
taste buds 

■ Truck inspections under 
way for the metropolitan 
area 



Are the beaches safe for 
swimming this year? 


Pellentesque habitant morbi 
tristique senectus et netus et 
malesuada fames ac turpis 
egestas, 


Ar e th a be a ch e s s a fe for 

swimming this year? 


■ 100 red bicycles stolen from 
local bike store 


■ New leash laws in effect for 
floppy-eared dogs 


■ Insider: Can palm trees be 
saved? 

■ Fresh recipes to titillate the 
taste buds 

■ Truck inspections under way 
for the metropolitan area 



New leash laws in effect for 
floppy-eared dogs 


Pellentesque habitant morbi 
tristique senectus et netus et 
malesuada fames ac turpis 

pnpsjtac 


<Cloc:lcwise from lop left> 

• The lava lamp effect is done 
using CSS3 transitions, keeping 
our JavaScript animation-free 

• The red bullets on the headline 
items use pseudo-elements 

• Using a negative margin and 
some z-index settings, we make 
the highlight bar appear to flow 
into the content section 

• How our widget might look on 
a mobile device. Percentage 
widths in our CSS help us 
achieve this. 


■ ' ::tl rr;- hirydr- “hnlr- fmn 

■ Ih.= lsw.= n aITpl” t~\ 

■ I d Jt:i: Ctrl pc ri treed bt : 

■ -'csJi I'JLp'JJ jj .Li -j.- L- : 

■ “hir; -li-pnrrir v unrlrr 

d Sf jJ 

■ Aju the - L-ji- j'- l-j'l: IT- '-i 


■ 100 red 
bicycles stolen 
from local bike 
store 

■ New leash 
laws in effect 
for floppy¬ 
eared dogs 

■ Insider: Can 
palm trees be 
saved? 

■ Fresh recipes 
to titillate the 
taste buds 



Are the beaches 
safe for swimming 
this year? 


Pellentesque 
habitant morbi 
tristique senectus 
et netus et 
malesuada fames 
ac turpis egestas. 


■ Truck 
inspections 
under way for 
the 

metropolitan 

area 


■ Are the 
beaches safe 
for swimming 
this year? 


Adding a transition 

To avoid using jQuery for the highlight bar 
animation, well add some CSS3 transitions to the 
headline list items. We also add some innocuous 
transforms to help the animation look smoother. The 
z-index value is important to help the white highlight 
bar (which has a lower z-index) appear below all the list 
items in the stack. 


001 

.news-headlines li { 

002 

padding: 5px 20px 5px 24px; 

003 

margin-bottom: 15px; 

004 

position: relative; 

005 

z-index: 20; 

006 

-webkit-transition: all .75s 

ease-out; 

007 

-moz-transition: all .75s ease- 

out; 

008 

-o-transition: all .75s ease-out; 

009 

transition: all .75s ease-out; 

010 

color: #336699; 

011 

-webkit-transform: translateZ(0); 

012 

-moz-transform: translateZ(0); 


013 -o-transform: translateZ(0); 

014 transform: translateZ(0); 

015 } 

Pseudo-element bullets 

To create the list item bullets, well use 
pseudo-elements. This helps us avoid adding an 
unnecessary image. The pseudo-element is a small red 
box set to display: inline-block and margin settings help 
position it correctly. We also ensure that the cursor 
changes to a hand when the list item is hovered (since 
we’re not using <a> elements). 

001 .news-headlines li:before { 

002 content: 

003 display: inline-block; 

004 width: 5px; 

005 height: 5px; 

006 background: red; 

007 vertical-align: middle; 

008 margin-left: -12px; 

009 margin-right: 7px; 

010 } 


011 

012 .news-headlines li:hover 
013 { 

014 cursor: pointer; 

015 } 

Stacked news items 

On the right-side of the widget well display 
content associated with the selected news item. Each of 
these items will be absolutely positioned to help stack 
them so only one is visible at a time. A separate class 
will be used to bring the selected news item to the top 
of the stack with z-index: 


001 

.news-content { 

002 

position: absolute; 

003 

background: white; 

004 

z-index: 10; 

005 

padding: 10px; 

006 

top: 0; 

007 

left: 0; 

008 

} 

009 





49 


tutorials 

















































Build a news content switcher with j Query & CSS3 


<Top left, <:lo«:kwise> 

• Our script cycles through the list items, but it ignores the “highlight” item 
thanks to jQuery’s :not() selector 

• Without the doEqualHeightO function, we might end up with 
undesirable results 

• Our headlines could be single line or multiline and our script will 
calculate the correct height for the highlight bar 

• To position the highlight on the selected item, we calculate the height of 
all preceding list items 
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Fixing 
Transition 
Artifacts 

Use transform: translateZ(O) 
on the transitioned element 
to fix streaks or other 
artifacts occurring with 
CSS3 transitions. 


010 .top-content { 
011 z-index: 50; 
012 } 


100 red bicycles 
stolen from 
local bike store 


New leash laws 
in effect for 
floppy-eared 
dogs 

Insider: Can 
palm trees be 
saved? 


Fresh recipes to 
titillate the 
taste buds 


Truck 
inspections 
under way for 
the 

metropolitan 


Are the 
beaches safe 
for swimming 
this year? 



Are the beaches 
safe for swimming 
this year? 

Pellentesque 
habitant morbi 
tristique senectus 
et netus et 
malesuada fames ac 
turpis egestas, 


010 position: relative; 

011 } 

Responsive images 

This isn’t a fully-fledged responsive images 
solution that uses different image resolutions, but 
instead well just add some simple CSS to help keep the 
image at a maximum size while reducing its size for 
smaller devices. The key parts of this code block are the 
width, height, max-width, and max-height properties: 

001 .news-preview img 


001 .news-headlines .highlight { 

002 width: 100%; 

003 background: white; 

004 border-top: solid lpx #999; 

005 border-left: solid lpx #999; 

006 border-bottom: solid lpx #999; 

007 position: absolute; 

008 top: 0; 

009 left: 0; 

010 z-index: 10; 

011 } 


Negative margin 

We want the white highlight bar to appear as 
though it’s flowing right into the content area on the 
right-side of the widget. To do this, we’ll apply a negative 
margin to the content section, along with a z-index 
value that’s lower than that of the highlight bar itself. 


001 

.news-preview { 

002 

float: left; 

003 

border: solid lpx #999; 

004 

width: 51%; 

005 

background: white; 

006 

position: relative; 

007 

z-index: 5; 

008 

margin-left: -lpx; 

009 

min-height: 304px; 


002 { 

003 

004 

display: block; 
border: solid lpx #999; 

005 

width: 100%; 

006 

007 

height: auto; 
max-width: 220px; 

008 

max-height: 143px; 

009 
010 } 

margin: 0 auto 5px auto; 


The highlight bar 

Finally, the last list item in our headlines list is an 
empty element that’s used as the highlight bar, to 
indicate the current selected item. Semantic purists 
might want to inject this element with JavaScript to 
keep the HTML clean. We’ll apply the following default 
styles to help position it: 


Defining our variables 

The first thing our script will do is cache some 
objects that we’ll refer to multiple times in our code. 
Then we’ll initiate some utility variables, some of which 
are set initially to null because they depend on values 
that aren’t constant. The vPadding and vMargin 
variables are used to calculate the size of the headline 
items so that it can be fully controlled with CSS and thus 
will be more maintainable. 

001 var hi = $(’.highlight'), 

002 newsList = $(’.news-headlines’), 

003 newsListltems = $(’.news-headlines 

li’), 

004 firstNewsItem = $(’.news-headlines 

li:nth-child(l)’), 

005 newsPreview = $(’.news-preview’), 
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006 elCount = $(’.news-headlines’). 

children(’:not(.highlight)’).index(), 

007 vPadding = (parseInt(firstNewsItem. 

css('padding-top').replace('px', 10)) + 

(parselnt(firstNewsItem.css(’padding-bottom’). 
replace('px', ''), 10)), 

008 vMargin = (parseInt(firstNewsItem. 

css('margin-top').replace('px’, ’’), 10)) + 
(parseInt(firstNewsItem.css('margin-bottom'). 
replace('px', ’’), 10)), 


009 

myTimer = null, 

010 

siblings = null, 

011 

totalHeight = null, 

012 

indexEl = 1, 

013 

i = null; 


Equal height columns 

Our widget is divided into two columns. To 
ensure the sides are relatively equal, even after the user 
resizes the browser window, well create a function that 
will equal out the columns depending on which side is 
bigger. The function uses a min-height value set in the 
CSS, again keeping this data outside the script itself. 

001 function doEqualHeight() { 

002 

003 if (newsPreview.height() < newsList. 
heightO) { 

004 newsPreview.height(newsList. 

heightO); 

005 } else if ((newsList.heightO < 

newsPreview.heightO) && (newsList.heightO 
> parseInt(newsPreview.css(’min-height’). 
replace('px', ’’), 10))) { 

006 newsPreview.height(newsList. 

heightO); 

007 } 

008 
009 } 

Auto change 

We want the widget to cycle through the 
headlines automatically. For this, well create a function 
that uses JavaScript’s setlntervalO method. This function 
will trigger a click event every ten seconds. Each time 
the click event is triggered, the selected news item 
changes. If the current selected element is the last 
element, it will cycle back to item one. 


001 

function doTimedSwitch() { 

002 

003 

myTimer = setInterval(function () { 

004 

if (($(’.selected').prev().index() + 

1) = 

== elCount) { 

005 

firstNewsItem.trigger('click'); 

006 

} else { 

007 

$(’ .selected’).next(’:not(. 

highlight) ’) .trigger('click') ; 

008 

} 

009 

}, 10000); 


010 
011 } 

The click function 

Next, let’s begin our primary function, the 
doClickltemO function. We’ll start by adding the click 
event to our news items. This event gets triggered 
either manually by the user, or automatically by the 
script, using jQuery’s triggerO method. We remove any 
instances of the selected class, and add the selected 
class to the currently clicked item. 


001 

function doClickltemO { 

002 


003 

004 

newsListItems.on('click', function () { 

005 

newsListlterns.removeClass(’selected’); 

006 

007 

$(this).addClassQselected’); 

008 

// further code is added here in 

subsequent steps... 

009 

010 


011 


012 

> 


Calculate highlight position 

Lets add to our doClickltemO function. We want 
to find out how many items appear before the current 
highlighted item. Once we know that (which we get 
using jQuery’s prevAIIO), we set the totalHeight variable 
to zero, and then loop through the items. We add up the 
total height of all the items, plus any vertical padding 
and margins. 


001 siblings = $(this).prevAll(); 

002 totalHeight = 0; 

003 

004 for (i = 0; i < siblings.length; i += 1) { 

005 totalHeight += $(siblings[i]).heightO; 

006 totalHeight += vPadding; 

007 totalHeight += vMargin; 

008 } 

Move the highlight 

Using the totalHeight calculation from the 
previous step, we use jQuery’s cssO method to set the 
top and height values of the highlight element (cached 
in our variables as hi). Because we’ve set a CSS3 
transition on the list items using the all keyword (which 
means transition all properties), the top and height 
values will animate when changed with JavaScript. 

001 hl.css({ 

002 top: totalHeight, 

003 height: $(this).heightO + vPadding 

004 }); 

Show news item 

Further adding to our doClickltemO function, we 
find out the index of the current highlighted element 
using jQuery’s indexO method, adding one to the result 
to account for zero-based indexing. Once we know that, 
we use that number to add the top-content class to the 
corresponding .news-content element, thus putting it at 
the top of the stack so it’s visible. 

001 indexEl = $(this).index() + 1; 

002 


100 red bicycles stolen 
from local bike store 


p New Eeaah taws m effect 
for floppy -eared dogs 

p insider: Can palm trees, 
he saved? 


Fresh r^eipus id iiiiUafci 
the taste buds 


* Truck inspections under 
way for the metropolitan 
area 

i Are die beaches safe for 
swimming thrs year? 



Are dhe beaches 
safe for swimminrg 
this year? 

PellentesqU'e 

habitant morfsi 
tnshque senectys 
et netus et 
malesuada fames 
ae tyrpis egestas. 


<Left> 

• Our content items (staggered 
here for effect) are stacked with 
z-index values, which change 
when an item is selected 
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003 $(’.news-content:nth-child(’ + indexEl + 
’)’).siblings().removeClass(’top-content’); 
004 $(’.news-content:nth-child(' + indexEl + 
’)’).addClass('top-content’); 


Finishing up doClickltemO 

Finally, to wrap up our doClickltemO function, we 
use JavaScript’s clearlntervalO method to stop the timer, 
and then we start it again by calling the doTimedSwitch 
0 function we created earlier. We stop the timer to 
ensure ten seconds is spent on the newly clicked item. 


001 clearlnterval(myTimer); 
002 doTimedSwitch(); 


Window resizing 

To ensure that our widget looks decent if the 
window is resized by the user, well set up a function 
that uses jQuery’s $(window).resize() method. This 
method will execute an anonymous function each time 
the window is resized. The first thing well do in that 
function is stop the timer. 


001 function doWindowResize() { 

002 $(window).resize(function () { 
003 clearlnterval(myTimer); 

004 }); 

005 } 


Correct the heights 

The doWindowResizeO function continues when 
we use JavaScript’s setTimeoutO method to trigger a 
delayed click event on the selected item (to account for 
time spent resizing the window). This ensures that the 
white highlight bar is the correct height. Finally, we 
ensure the two sides of the widget are equal in height 
by calling our doEqualHeightO function. 


001 

function doWindowResizeO { 

002 

$(window).resize(function () { 

003 

clearlnterval(myTimer); 

004 

setTimeout(function () { 

005 $(’.selected’).trigger('click'); 

006 

}, 1000 ); 

007 

doEqualHeightO; 

008 

}); 

009 } 


Initiate the script 

Finally, now that we have defined all of our 
variables and functions, we execute all three functions 
and then trigger a click event on the currently selected 
element to get things started. 


001 doClickltemO; 

002 doWindowResizeO; 

003 setTimeout(function () { 

004 doEqualHeightO; 

005 }, 500); 

006 $(’.selected’).trigger('click'); 


Code library 

The essential elements 

Here we cherry pick the key components of the content switcher for a 
closer look at them in action 


Here we set up our 
cached objects and 
utility variables. 


001 var hi = $(’.highlight’), 

002 newsList = $(’.news-headlines’), 

003 newsListltems = $(’.news-headlines li'), 

004 firstNewsItem = $('.news-headlines li:nth-child(l)'), 
005 newsPreview = $(’.news-preview’), 

006 elCount = $(’.news-headlines’).children(’:not(. 

highlight)’).index(), 

007 vPadding = (parseInt(firstNewsItem.css('padding-top'). 

replace(’px’, ’’), 10)) + (parseInt(firstNewsItem. 

css('padding-bottom').replace(’px’, ’’), 10)), 

008 vMargin = (parseInt(firstNewsItem. 

css(’margin-top').replace(’px’, "), 10)) + 
(parselnt(firstNewsItem.css(’margin-bottom’).replace(’px', ’’) 
10)), 

009 myTimer = null, 

010 siblings = null, 

011 totalHeight = null, 

012 indexEl = 1, 

013 i = null; 


The functions to 
equalize the column 
heights and do the 
auto-timed switching. 


001 function doEqualHeightO { 

002 

003 if (newsPreview.height() < newsList.height()) { 

004 newsPreview.height(newsList.height()); 

005 } else if ((newsList.height() < newsPreview.height()) 

&& (newsList.height() > parselnt(newsPreview.css('min-height') 
replace(’px’, ’’), 10))) { 

006 newsPreview.height(newsList.height()); 

007 } 

008 
010 } 


Correct some height 
values when the 
window is resized, 
then initiate the 
script’s functions. 


001 function doWindowResizeO { 

002 

003 $(window).resize(function () { 

004 

005 clearlnterval(myTimer); 

006 setTimeout(function () { 

007 $(’.selected’).trigger('click'); 

008 }, 1000 ); 

009 

010 doEqualHeightO; 

011 

012 }); 

013 
014 } 

015 

016 doClickltemO; 

017 doWindowResizeO; 

018 setTimeout(function () { 

019 doEqualHeightO; 

020 }, 500); 

021 $(’.selected’).trigger('click'); 
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Capture webcam video without a plug-in 


Capture 
webcam 
video without 
a plug-in 

Use JavaScript and HTML5 to cut out 
third-party applications and Flash 
components for webcam use 

tools I tecli I fronds Dreamweaver, HTML5, JavaScript 
export Pete Simmons 



TML5 is fast becoming the 
developer tool of choice, moving 
away from heavy Flash apps, and 
switching to a fast, lightweight 
solution. A new generation of web 
interaction is coming, where users 
are able to play full games in their 
browser without a hint of Flash. 

Typically, interacting with a user’s 
webcam required a third-party 
application or a Flash component, but now we can access 
this data via the cutting-edge HTML5 technology known as 
getUserMedia. As with anything this new and exciting there 
are bound to be some teething problems, the main one is 
the cross-browser compatibility of getUserMedia. It is 
recommended that you use the latest version of Chrome 
as most other browsers simply won’t work. We’ll cover a bit 
on using Flash as a fallback to HTML5, but it is probably 
wise to hold off putting this technology into a production 
environment until it becomes standardised. 

Another problem with getUserMedia is that no browsers 
currently support the use of audio. This is fine for this 
tutorial as we will only be covering images, but worth 
noting if you want to deviate from the tutorial steps. 


HTML page setup 

Before we get into any coding, it is worth noting 
that the DOCTYPE for an FITML5 page is different from 
a standard page. There is a lot less information that 
goes into it as FITML5-compatible browsers do not 
require as much information. Create a new HTML 
document and replace the standard DOCTYPE 
information with the following. 

001 <!DOCTYPE html> 

002 <head> 

003 <title>WebCam Access</title> 

004 </head> 

005 

006 <body> 

007 </body> 

008 </html> 

The video tag 

Go into the body section of your HTML 
document and add the following video tag. The video 
tag is new to HTML5 and allows us to easily embed 
video into a page, simply by adding a source. In this 
case we do not need a source, but can just add an 
autoplay element. 

001 <video autoplayx/video> 

Link to a JS file 

We’ll create our webcam access script in a 
separate JS file. This allows us to use it on multiple sites 
and pages if need be. Add the following code 
underneath our video tag. Go ahead and create a new 


JS document called ‘webcam.js’ and save it into the 
same directory as your index file. 

001 <script src=”webcam. js"x/script> 

Checking browser capabilities 

The first thing we will do in our webcam.js file is 
check to make sure that the browser used is capable of 
calling the getUserMedia command. This can be done 
with the following JavaScript code. Everything we do 
from here on in will be placed inside this if statement. 

001 if (navigator. webkitGetllserMedia!=null) { 

002 

003 } 

Requesting feeds 

At this point we need to set some options that 
we will use further down the line. As mentioned in the 
introduction to this tutorial, there are problems 
accessing audio via a webcam. However, we will set 
audio to true for future use. Add the following code 
within the previous if statement. 

001 var options = { 

002 video:true, 

003 audio:true 

004 }; 

Calling getUserMedia 

It’s now time to make a call to getUserMedia 
from within our webcam.js file. Place the following code 
underneath the closing bracket of the previous step, but 


before the closing bracket of our if statement. This code 
will call getUserMedia and pass all of our required 
options through. 

001 navigator.webkitGetUserMedia(options, 

002 

003 ); 

Add streaming function 

Within the brackets of the previous step, add the 
following function. This function, when called, will look 
for our video tag and create an object URL based on 
it. This object URL will be used at various points in our 
code further on. Remember to place this within our if 
statement still. 

001 function(stream) { 

002 var video = document. 

querySelector(’video’); 

003 video.src = window.webkitURL. 

createObjectURL(stream); 

004 }, 

Error handling 

The next step is to add an error statement that 
will write data to console log if there is a problem with 
getUserMedia. Add the following underneath our 
previous step, still within the navigator.webkitGetUser 
Media brackets. Now we will be able to debug our code 
via the console if there is a problem. 

001 function(e) { 

002 console.log(”There was a problem 
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® 0 WebCam Access . _ 

c P localhost/WD203/ 

■4 http://localhost/wants to use your camera and microphone. Deny Allow 


J Camera: FaeeTime HD Camara (SuilT-in) 
/ Microphone: Default 


Microphone: Built-in Input 




<Clo«:kwise from top left> 

• The dialogue box that is presented to users to authorise webcam access. 
This has to be accepted every time 

• A user is able to select the source of audio and video feeds, useful for 
those with multiple cameras 

• With some error handling, we are able to warn the user that they need to 
allow access to their webcam 

• Our output is seen in the canvas, but it’s not scaling the image correctly 


with webkitGetUserMedia"); 

003 } 

Running our code 

It’s finally time to run our code! Open the latest 
version of Google Chrome and navigate to your 
working directory. The first thing you will notice is a 
notification in your browser window, asking for 
permission to access the webcam. Click Allow and you 
should see a livestream from your webcam. 

In-browser options 

You may also notice that the notification bar in 
Google Chrome has an option drop-down menu. 
Opening this will allow a user to select which webcam 
the application has access to. Sound options are also 
displayed here, even though we cannot use them at this 
stage. If you have multiple cameras connected to your 
machine, try out the different options. 

Handling a denied request 

If a user clicks Deny in the previous step, our 
code will fail and we will have no way of informing them 
why. The easiest thing to do is to create an alert event 
that is tied into the error console. This can be done by 


amending our console.log section to include the 
following additional line. 

001 function(e) { 

002 alert("You need to allow webcam access 
for this page"); 

003 console.log("There was a problem 

with webkitGetUserMedia"); 

004 } 

Adding a capture button 

Now we need a way to capture a still image 
from our webcam feed. Go back to your index.html file. 
Adding the following form element underneath our 
video tag will give us the means to capture a still image 
using some more JavaScript and a canvas element that 
we will add over the next few steps. 

001 <form><input type=’button’ id=’capture’ 
value="Smile!"/></form> 

Adding a canvas 

Canvas is another new element to HTML5. 
Adding the following tag underneath the previous step 
will give us a place to display the captured image once 


it has been processed by the JavaScript. You can set 
the width and height to anything you like, but 
remember that not all webcams are HD and may 
produce bad image quality. 

001 <canvas id=’canvas’ width='300' 
height^’300’></canvas> 

Link button to JavaScript 

Adding the following script code underneath the 
previous step will link our button to our JavaScript. The 
code listens out for a click on a button with the ID 
capture. If you have multiple buttons on your page that 
do different things, ensure all IDs are unique. This code 
also determines the video source and canvas output. 

001 <script language=’JavaScript’> 
document.getElementById('capture').onclick = 
function() { 

002 var video = document. 

querySelector(’video’); 

003 var canvas = document. 

getElementById(’canvas’); 

004 } 

005 </script> 
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Outputting an image 

Adding two more lines of code to the previous 
step will draw the captured image into our canvas. As 
you can see, the canvas can be used for both 2D and 3D 
elements. As we are working with images, we set this to 
2D. Running the code now will show a captured image 


Use on mobile 

As it currently stands mobile 
browsers do not support 
getUserMedia. Hopefully, 
further down the line they 
will, allowing developers 
access to an iPhone camera 
in-browser. 


Getting image data 

What else can we do with our image? Well, we 
can modify the pixel data with code. An example of this 
is replacing all colour with greyscale. To do this we first 
need to interpret the pixel data with the following line. 

001 var data = ctx.getImageData(0,0,canvas. 


<Clo«:lcwise from top left> 

• Our output is now scaled correctly, showing the entire resized image on the HTML canvas 


By looping through pixel data we are able to invert the pixels of the original image 


• We can also remove all colour and make the image greyscale by looping through the same 
data, and reducing all RGB values by 255 


'' ' r "' 1 ^ E Xii-riL 

4- O , | ! itaalhnivWSJfdi 


in our canvas. 


width,canvas.height); 


001 document.getElementById(’capture’). 
onclick = function() { 

002 var video = document. 

querySelector(’video’); 

003 var canvas = document. 

getElementById(’canvas’); 

004 var ctx = canvas.getContext(’2d’); 
005 ctx.drawlmage(video,0,0); 

006 } 


Non-cropped images 

The eagle-eyed among you may have noticed 
that the image we produced in the previous step was 
very heavily cropped. To avoid this and to display a full 
size image, we simply have to pass two more variables 
into our ctx.drawlmage command. By passing a width 
and a height we are able to scale our image to the 
canvas size, rather than capturing the top-left section 
of the image. 

001 ctx.drawlmage(video,0,0,300,250); 


Creating a loop 

Now we have the pixel data of the image set as a 
variable, we can loop through and remove all colour. 

The following code bracket sets us up with a loop that 
will do just that. Add this within the onclick brackets 
underneath the previous step. The loop will stop once it 
reaches the image width and height. 

001 for(n=0; n<data.width*data.height; n++) { 
002 

003 } 
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Removing all colour 

The following complete loop will take the red, 
green and blue channels and reduce the data value by 
255. Those familiar with RGB values will know that any 
colour can be made using a combination of red, green 
and blue in 255 increments. Taking these all to 0 will 
produce a black and white image. 


001 for(n=0; n<data.width*data.height; n++) { 
002 var index = n*4; 

003 data.data[index+0] = 255-data. 

data[index+0]; 

004 data.data[index+l] = 255-data. 

data[index+l]; 

005 data.data[index+2] = 255-data. 

data[index+2]; 

006 } 


Outputting the image 

Now we have removed all colour, we can output 
our new black and white image. Placing this code 
outside of the loop will put the new pixel data back into 
the canvas, at this point you can specify a new canvas if 
you wish to keep the original, unedited capture. 


001 ctx.putlmageData(data,0,0); 


Flash fallback 


As mentioned before, webcam access is only 
available in a select few browsers. To combat this we will 
use a jQuery fallback. Download the jQuery webcam 
plug-in from bit.ly/c8LYyY, copy the files to your working 
directory and add the following lines of code to the head 
section of your index.html file. 


001 <script src="http://code.jquery.com/jquery- 
1.7.2. min. js"x/script> 

002 <script type="text/JavaScript" src="jquery. 
webcam, min. js"x/script> 


Add a flash version 


Adding the following code under our video tag in 
the index.html file will display the Flash fallback. The 
correct way to do this would be to create two pages and 
do some level of browser detection. You would then 
have a Flash or PITML5 version depending on the 
capabilities of a user’s browser. 


001 <div id=”webcam”x/div> 

002 <pxa href=”JavaScript:webcam. 
capture(); void(0) ;”>Smile!</ax/p> 
003 <script type=”text/JavaScript”> 
004 jQuery(“#webcam”).webcam({ 

005 width: 320, 

006 height: 240, 

007 mode: “callback”, 

008 swffile: “jscam.swf”, 

009 }); 

010 </script> 



Code library 

Playing with pixels 

In this tutorial we are taking raw pixel data and manipulating it through 
code. Here’s how it’s done 


A capture is saved to 
thecanvasby 
listening out for a 
form button press. 


001 document.getElementById('capture').onclick = function() { 
002 var video = document.querySelector(’video’); 

003 var canvas = document.getElementById(’canvas’); 

004 var ctx = canvas.getContext('2d'); 

005 ctx.drawlmage(video,0,0,300,250); 


001 var data = ctx.getlmageData(0,0,canvas.width,canvas.height); 
002 


The pixel data is set as a 
variable, then a loop is 
created to remove all 

003 for(n=0; n<data.width*data.height; n++) { 

004 

var index = n*4; 

colour values. 

005 

data.data[index+0] = 255-data.data[index+0]; 


006 

data.data[index+l] = 

255-data.data[index+l]; 

007 

data.data[index+2] = 

255-data.data[index+2]; 

008 

} 


009 



010 ctx.putlmageData(data,0,0); 


The process in the 
back end that is doing 
all the hard work, 
including some basic 
error handling. 


001 navigator.webkitGetUserMedia(options, 

002 function(stream) { 

003 var video = document.querySelector(’video'); 

004 video.src = window.webkitURL. 

createObjectURL(stream); 

005 }, 

006 function(e) { 

007 alert("You need to allow webcam access for this page"); 
008 console.log("There was a problem with 

webkitGetUserMedia"); 

009 } 

010 ); 
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Create a site with 3D CSS navigation using Menyjs 


Create a site 
with 3D CSS 
navigation 
using Menyjs 

Surprising your website visitors with 
playful interactions is a great way to 
build a loyal following for your site 

tools I tecli I trends Photoshop, Dreamweaver 
expert Sam Hampton-Smith 



SS3 has completely 
revolutionised the way 
designers create websites, from 
simple things like rounded 
corners no longer being 
rendered as graphics, to 
complex user interactions. 

Much of what is possible is still 
being discovered by web 
designers - both professionals 
and novices - and the result is a rich diversity in design 
approaches and user interface. 

In this tutorial we’re going to build a simple website 
design from a Photoshop mockup, but rather than stick 
with the original navigation design, well use an 
open-sourced GitHub-hosted project that uses CSS3 to 
render our navigation as a 3D element that rotates into 
view when the mouse moves over the top of the page. 

Although the project uses JavaScript, all the user 
interaction effects are rendered entirely using CSS, so all 
the benefits of native browser rendering are retained, 
and it’s also compatible with touch-based devices such 
as the iPad. 


Mock up your site 

We need a design to work with, so we’ve created 
a simple page mockup inside Photoshop to use as the 
basis for this tutorial. You can find the PSD file on the 
resource disc, or use your own design if you prefer. 

Note the simple navigation bar running along the top of 
our design. 

001 mkdir underscores 
002 cd underscores 

003 wget http://wordpress.org/latest.tar.gz 
004 tar xfz latest.tar.gz 

The basic page 

We’re rendering our page using several of the 
new tags found in HTML5. This ensures that our code is 
semantic (ie it describes its content correctly) and is as 
lean as possible. Create your basic HTML to match your 
design, or copy ours from the resource disc, on which 
you can find the code for this step. 

Understanding the markup 

You’ll notice that we’ve separated out the two 
parts of the page so that the menu sits independently 
from the rest of the page, and a single container has all 
the content we’ll want to rotate when showing the 
menu - this is important for the function of the script 
later on, and helps us achieve the right effect. 

001 <div class=”menu”> 

002 <!—The menu will be shown by rotating in 
3D space —> 

003 <nav>...</nav> 


004 </div> 

005 <div class=”container”> 

006 <!— Everything inside the container 

will be rotated slightly when the menu is shown 
—> 

007 <header>...</header> 

008 <article>...</article> 

009 <footer>...</footer> 

010 </div> 

Simple styles 

We need to create the basic styles for our page 
to create the look of our mockup. We’ve already saved a 
few background images from our mockup to our 
/styles/ folder where necessary, and we’ll apply these to 
our design, along with some layout and typographical 
rules now. 


001 body { 

002 

background: 

#lalala; 

003 

color: #fff; 


004 

font-family: 

helvetica, arial, 

sans 

-serif; 


005 

font-size: 

62.5%; 

006 

line-height: 

2.lem; 

007 

margin: 

0; 

008 

padding: 0; 


009 } 

010 

011 

header, article, footer { 

012 

margin: 

0; 

013 

padding: 0; 


014 

display: block; 



015 

width: 960px; 


016 

margin: 

auto; 

017 

box-shadow: 

0px 0px 10px #000; 

018 

background: 

#000; 

019 

font-size: 

1.2em; 

020 } 


021 



022 article { 

023 

padding-top: 

40px; 

024 

min-height: 

500px; 

025 } 

026 



027 article section { 


028 

width: 263px; 


029 

background: 

transparent 

url(boxshine.jpg) repeat-x 

top left; 

030 

min-height: 

200px; 

031 

border-right: 

lpx solid 

#lalala; 


032 

float: left; 


033 

margin-left: 

10px; 

034 

padding: 20px; 


035 } 

036 



037 

.lastword { 


038 

clear: both; 


039 } 

040 

041 

footer { 


042 

padding: 40px; 


043 

width: 880px; 


044 

color: #999; 


045 } 
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More CSS 

We need to render the logo and introduction 
text so that it matches our mockup. Firstly, make sure 
you’ve saved your logo file out of your graphics editor 
(or use ours on the resource disc), then add the styles 
shown to hide the <h1> text and replace it with the logo 
as a background. 


016 

017 #logo a.calltoaction { 

018 font-size: 0.8em; 

019 } 


M'- creative. _ 

V results 


001 #logo { 

002 
003 
#04 
005 
006 
007 } 

008 

009 #logo hi { 

|10 width: 

111 height: 

012 overflow: hidden; 

013 text-indent: 

014 background: 


width: 340px; 

float: left; 

margin-left: 
margin-top: 
margin-right: 


320px; 


<Left> 

•As the visitor moves 
their mouse over the 
top area of the page, 
the entire page rotates 
away 15 degrees to 
reveal the menu along 
the top edge of the 
screen. This behaviour 
is hinted at with a 
handle that appears 
along the top edge of 
the design when the 
menu isn’t visible 


4 


Rounded 
corners = circles 

Creating a circular <div> 
element is easy with CSS3 
rounded corners. Set your 
<div> to have equal width 
and height values, and the 
border-radius property to half 
your element’s width 




40px; 

100px; 


40px; 


80px; 

-10000px; 

transparent 


url(logo.png) no-repeat top left; 


015 } 


ThJ? is Photaslhy&rsiyn of Um^ti ipsom, 
Pmin gravida nibh vel valit auctor aliquet. 
AorHVin Mllititudin, lorem quis bibortdunft 
auctcr, nisi Blitconsaquel ipsgjin, nec 
sam nibh id elit Duissed 


Render the menu 

One of the most important elements in any 
page design is the navigation, and our design is no 
different. We’ve opted for a simple approach because 
the 3D effect will add enough user interaction without 
needing to get too elaborate in our design, but it’s 
essential to render our design carefully. 


001 

nav { 


002 

position: 

relative; 

003 

// add a border to provide a hint to the 

visitor 


004 

// that they 

can reveal the menu at the 

top of the page 

005 

border-bottom: 2px solid 

#fe9758; 


006 

background: 

#000; 

007 

color: 

#fe9758; 

008 

height: 

50px; 

009 

display: 

block; 

010 

box-shadow: 

0px 0px 10px #000; 
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Cl results 
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<Above> 

• Some browsers won’t render perspective properly, flattening the effect 


l 


W I"*- W-tf 


_d 




Browser 
vendor prefixes 




011 

z-index: 

1; 


012 } 

013 




014 nav ul { 



015 

position: 

relative; 


016 

margin: 

0; 


017 

padding: 

0; 


018 

text-align: 

right; 


019 

z-index: 

100; 


020 

background: 

#000; 


021 

padding-right: 

100px; 

022 } 

023 

024 nav ul li { 

025 

list-style: 

none; 


026 

margin: 

0; 


027 

padding: 

5px 10px; 


028 

display: 

inline-block; 


029 

line-height: 

35px; 


030 

z-index: 

100; 


031 } 

032 

033 nav ul li a { 

034 

text-decoration: none; 


035 

font-size: 

1.2em; 


036 

color: 

#fe9758; 


037 

z-index: 

100; 



The script handles most 
browser vendor prefix issues 
for the best compatibility. If 
you’re creating your own, use 
the W3C proposed version of 
any CSS3 property last for 
future compatibility. 


038 } 

039 

040 nav ul li a.active, nav ul li a:hover { 

041 color: #fff; 

Building a handle 

The border we’ve added at the bottom of our 
navigation bar isn’t yet sufficient to let our visitors know 
what they need to do, so we’ve added a <div> to our 
HTML that will become a handle that has an arrow set 
within. This is all achieved using CSS instead of 
pre-rendered graphics. Add the code shown to set up 
the required properties. 

001 nav #handle { 

002 width: 20px; 

003 height: 20px; 


border-radius: 
position: absolute; 

top: 40px; 

left: 50%; 

margin-left: 
background: 
z-index: 1; 


004 
005 
006 
007 
008 
009 
010 
011 } 

012 

013 nav #handle .downarrow { 
014 border: 
transparent; 

015 border-top: 

016 position: 

017 left: 

018 bottom: 

019 } 


10px; 


-10px; 

# 000 ; 


5px solid 


8px solid #FE9658; 


absolute; 

5px; 


0px; 


Add finesse 

The design is looking a whole lot closer to the 
mockup now, but we still need to make some additional 
design touches, such as the shine behind each section, 
the subtle dividing lines, and a drop shadow to separate 
the design from its background. Add the CSS code 
shown to finalise these aesthetically embellishing design 
elements, and get closer to the final site. 
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001 article section { 

002 

width: 263px; 


003 

background: 

transparent 

url(boxshine.jpg) repeat-x 

top left; 

004 

min-height: 

200px; 

005 

border-right: 

lpx solid 

#lalala; 


006 

float: left; 


007 

margin-left: 

10px; 

008 

padding: 20px; 


009 } 

010 

011 header, article, footer { 

012 

box-shadow: 

0px 0px 10px #000; 


Basic layouts 

Last but by no means least the final part of our 
design that’s missing is the styling of the links. We’ve got 
two different types of links - calls to action at the 
bottom of each section inside our main article area, and 
an inline email link that appears in the final section. Both 
should be coloured orange to match the design, but the 
call-to-action links also need some additional styling. 

Add this now. 


001 

a { 

002 

color: 

#FE9659; 

003 

> 

004 


005 

a.calltoaction { 

006 

font-weight: 

bold; 

007 

color: 

#FE9659; 

008 

text-align: 


right; 


009 

text-transform: 


uppercase; 

010 

float: 

right; 

011 

display: 

block; 

012 

cursor: 

pointer; 

013 } 
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Test and review 

Before going any further, it’s important to ensure 
your page design is working as you intended in all your 
target browsers. Load your page in each browser and 
check that everything is rendering as intended. Correct 
any issues before moving on as once the script is 
installed it may be difficult to track down bugs! 


Grab the script 

We’re going to use an open-source project 
created by the interactive web developer Hakim El 
Hattab to create the 3D transition effect in our site 
design. Start by visiting the GitHub page for the Meny 
project at github.eom/hakimel/meny#meny and read 
the installation instructions. Download the JavaScript file 
ready for use. 

Include the script 

In order to use the Meny system, we need to first 
include the file we downloaded in the previous step at 
the top of our page. Inside the <head> section, add the 
following code (assuming you saved the JavaScript file 
into a folder named /scripts/): <script src=”scripts/meny. 
js” ty pe=”text/javascr i pt”></scri pt>. 


001 

// Check viewport width on first load. 

002 

if ( $( window ).width() < 450 ) 

003 

$.fn.smallMenu(); 

004 

// and: 

005 

if ( browserWidth < 450 ) 


Call the script 

Next we need to initialise the script by calling it, 
and passing in some arguments that will define the 
parameters we’ll use on our page. This code needs to 
be called after the elements have been loaded by the 
browser, so place it immediately before your closing 
</body> tag to ensure all the HTML has been loaded by 
the time the code is executed. 


001 

<script> 

002 

// Call the Meny object 

003 

var meny = Meny.created 

004 

// pass in a reference to the menu 

container 

005 

menuElement: document.querySelector( 

’.menu’ ), 

006 

// and a reference to the container 

to be rotated 

007 

contentsElement: document. 

querySelector( ’.container’ ), 

008 

// tell the script where the menu is 

located 

009 

position: 'top', 

010 

// and how many pixels tall the menu 

is 

011 

height: 50 

012 

»; 

013 

</script> 


Understanding the options 

If you check the code we’ve just used, you’ll see 
that we set a number of options for the function to 
determine the containers to be rotated, the height of 
the menu, and its position. These values are essential to 
the operation of the effect, and you can find the full 
details on the project GitHub page, which is once again 
at github.eom/hakimel/meny#meny 


001 var meny = Meny.create({ 

002 // The element that will be 

animated in from off screen 
003 menuElement: document. 

querySelector( '.meny' ), 

004 

005 // The contents that gets pushed 

aside while Meny is active 
006 contentsElement: document. 

querySelector( '.contents' ), 

007 

008 // The alignment of the menu 

(top/right/bottom/left) 

009 position: 'left', 

010 

011 // The height of the menu (when 

using top/bottom position) 

012 height: 200, 

013 

014 // The width of the menu (when 



CSS33D 

Transformations 


Understanding the concept behind 3D 
transformations in CSS3 is pretty 
straightforward; the element is rotated 
about a single (or multiple) axis, and the 
browser handles this for you, rendering 
in a 3D scene. The reality of it is a little 
less predictable if you’re not familiar 
with 3D rendering, however - the origin 
for a transformation, the perspective of 
the viewpoint and element, and the 
collapsing of other transformations can 
quickly make for a mess when you’re 
trying to create a simple effect. Also keep 
in mind that currently only WebKit 
browsers fully support the proposed 3D 
transformations (although this will 
change over time). 

A great place to start understanding 
how transformations work is the WebKit 
blog, which has a series of examples and 
explanations to help you get up and 
running quickly: www.webkit.org/ 
blog/386/3d-transforms. 
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using left/right position) 
015 width: 260 


15 Customise your CSS and script 


Although we’ve already set up our styles, if you 
wanted to make additional changes to the way the 
effect looks you could use the hooks created by the 
script. A class is applied to the elements being affected, 
which allows you to add your own styles. There’s also a 
JavaScript event generated that you can listen for. Again, 
documentation can be located on the GitHub page. 



Test and review 


With your script in place, you need to test across 
browsers once more to ensure you’re aware of any 
issues, and the limitations of older browsers that don’t 
support 3D transformations and/or perspective. Try 
running your page with JavaScript disabled to see what 
happens (and make sure you fix any issues with 
navigation when scripting isn’t available). 


17 Tweak the effect 


I Finally, now that you’ve got a working effect it’s 
time to tweak it to your own taste. Make sure that the 
menu is a good height relative to the size of your 
navigation element, the handle is big enough to be 
obvious, and so on. These final tweaks can make all the 
difference in use. 



Code library 

Breaking down the CSS 

The 3D element is handled by inline styles added by the JavaScript, but it 
wouldn’t work without our core CSS in place: 



001 nav { 

We’ve styled our 
main <nav> HTML5 
element with an 

002 position: relative; 

003 border-bottom: 2px solid #fe9758; 

obvious bottom 

004 background: #000; 

border that will 
provide a visual cue 
to the visitor. 

005 color: #fe9758; 

006 height: 50px; 


007 display: block; 


008 box-shadow: 0px 0px 10px #000; 

009 z-index: 1; 


010 } 

The unordered list is 
styled in exactly the 
same way as in a 

011 nav ul { 

012 position: relative; 

013 margin: 0; 

regular horizontal 
menu bar, using 
inline-block instead of 
floats to allow us to 

014 padding: 0; 

015 text-align: right; 

016 z-index: 100; 

easily right align. 

017 background: #000; 

018 padding-right: 100px; 


019 } 


020 nav ul li { 


021 list-style: none; 


022 margin: 0; 


023 padding: 5px 10px; 

024 display: inline-block; 


025 line-height: 35px; 


026 z-index: 100; 

027 } 


028 nav ul li a { 

The orange border 
isn’t enough of a cue 
on its own, so we’ve 
added a handle with 

029 text-decoration: none; 

030 font-size: 1.2em; 

031 color: #fe9758; 

rounded corners to 
make a perfect circle. 

032 z-index: 100; 

033 } 


034 nav ul li a.active, nav ul li a:hover { 


035 color: #fff; 

036 } 


037 nav #handle { 


038 width: 20px; 

039 height: 20px; 


040 border-radius: 10px; 


041 position: absolute; 

042 top: 40px; 


043 left: 50%; 


044 margin-left: -10px; 

045 background: #000; 


046 z-index: 1; 

We create an arrow 
head using borders 
ona<div> with no 
width or height - this 
avoids having to 
render a graphic for 
the effect. 

047 } 

048 nav #handle .downarrow { 

049 border: 5px solid transparent; 

050 border-top: 8px solid #FE9658; 

051 position: absolute; 

052 left: 5px; 

053 bottom: 0px; 
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Create stitched effects on your webpage 


Create 
stitched 
effects on 
your webpage 

Use the power of Photoshop to 
simulate textures and stitching, giving 
your site an authentic look 

tools I tecli I fronds Photoshop 
export Adam Smith 



here’s a noticeable style trending 
at present, and that is the popular 
stitched effect, used to decorate 
logos and panels in numerous web 
design layouts. This is a great way 
to add a real-world feel to your 
projects, giving designs an aesthetic 
that you can almost touch. It’s no 
surprise then, that the purpose of 
applying the stitch is most 

noticeable when working with textured elements. These 
are, in turn, fundamental to achieving a wholly authentic 
look on your website. 

In this tutorial, well show you how to use some of 
Photoshop’s one-click and more intuitive options to 
cleverly combine stitch and texture effects. The use of 
Layer Styles will become the main focus of your 
application, applying Drop Shadow, Stroke, and Bevel & 
Emboss effects to create 3D looks. Also explored are the 
means with which you can create similar stitch effects 
using CSS3 code, for those of you that want a quicker 
fix than Photoshop allows. 


Sketch it out 

The first step when embarking on a project like 
this is to sketch out your ideas, getting a grip on what 
functionality you’d like to incorporate, how the user will 
interact with your gallery, and at least an idea of the 
visual approach you’d like to take. Spend five minutes 
with your sketch pad or a scrap of paper to work out the 
basics first! 


■ - 

2 

m- 

a 
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02 Create texture 


I Select File>New. Set Width at 450 pixels, Height 
at 450 pixels, Background Contents to Black. Select 
Filter>Texture>Texturize. Set Texture to Canvas, Scaling 
between 90% and 100%, Relief between 2 and 5. Click 
OK. Duplicate your layer (Ctrl/Cmd+J) and select 
Edit>Transform>Rotate 90° CW. Set the duplicate layer 
blending mode to Screen, editing layer opacity to verify 
effect strength. 



Edit texture 


Merge both layers (Ctrl/Cmd+Shift+E) then press 
Ctrl/Cmd+E and increase the brightness of your layer by 
pulling your curve upwards. Select Filter>Sharpen>Smart 
Sharpen. Set Amount at 50%, Radius at 3.0 pixels. Select 
Edit>Define Pattern naming it ‘Made Texture’. Select 
File>New. Set Width at 1 pixel, Height at 3 pixels. Zoom in 


to 3200%. 




04 Save a Pattern Preset 


Select 1 pixel (one third) at the top of your layer 
with the Rectangle Marquee tool. Fill this with black 
(Shift+F5). Deactivate your selection (Cmd/Ctrl+D) then 
select Edit>Define Pattern titling Texture Horizontal. 
Select lmage>lmage Rotation>90° CCW. Select 
Edit>Define Pattern, saving as Texture Vertical. Now it’s 
time to apply some texture. 



Work with gradients 

Easily establish your design's colour scheme by 
changing the colours of your mock shapes. Simply 
double click them and choose in the Color Picker. We’ve 
applied a pastel purple (#625870. Select Layer>Layer 
Style>Gradient Overlay. Set a black to transparent 
gradient style, setting Blend Mode to Overlay, Opacity at 
40%, Style to Radial, and activate Reverse. 



64 


tutorials 














































Create stitched effects on your webpage 



• In this image you can clearly see how 
we create authentic stitch looks using a 
combination of special effects combined 
with photo textures. Some textures are 
in fact replicated inside Photoshop, with 
the help of Layer Styles and Noise filters 


{ 


Add pattern presets 

r Select Pattern Overlay from the Layer Style 
options and open the pattern picker. Apply your Texture 
Horizontal preset setting Blend Mode to Overlay, 
Opacity at 40%. Duplicate this layer, setting layer opacity 
at 70%. Select Filter>Noise>Add Noise, setting Amount 
at 20%, Distribution to Gaussian, activating 
Monochromatic. Click OK to exit these options. 


Add pattern presets 

* Also set Blend Mode to Multiply, Opacity at 35%, 
Angle at 0 degrees. Activate Outer Glow (Layer Style), 
setting Blend Mode to Normal, Noise at 17%, Size at 4 
pixels and colour to a darker purple. Also apply a Drop 
Shadow (Layer Style), Opacity at 75%, Angle 21 degrees 
and repeat the texture application from step 6. 




Find royalty free textures 

If you are insistent on using 
real-world textures, but have 
no time to take your own try 
sites such as sxc.hu and 
deviantart.com. Be sure to 
read terms & conditions, but 
many samples are free for 
commercial use. 


Place your stitches 

The basic premise of your stitch effect is here, 
creating a looped stitch with a bevelled edge. Shift+click 
each related stitch layer, Ctrl+click one of these layers 
and select Convert to Smart Object. Now we duplicate 
and place our stitches, which are situated in each corner 
of our panel layer. 


Now were going to show you how to create one 
of several stitch effects in this tutorial. Start by activating 
your banner shape layer and select the Rounded 
Rectangle tool. Set shape Radius to 2mm then draw out 
your base shape. Select Gradient Overlay from the Layer 
Style options. Set a black to white to black gradient style. 
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<Left> 

• Step 15-the main 
banner of the page is 
really starting to take 
shape, as elements 
come together 


Perfect with Layer Styles 

& Compliment this stitch effect by firstly applying a 
Bevel & Emboss Layer Style. Set Style to Inner Bevel, 
Technique to Chisel Hard. Set Size at 5 pixels, Angle at 
99 degrees. Set Highlight and Shadow Mode opacities 
at both 70%. Also apply a black to white Gradient 
Overlay, Angle set at 90 degrees, Blend Mode to 
Overlay, Opacity at 30%. 


New CS6 
Stroke option 

Photoshop CS6 can now be 
split into two application - Fill 
and Stroke. Simply deactivate 
the first, but apply the second, 
now with lined and dot styles to 
create your stitch. You can also 
apply Layer Styles to your , 
Stroke settings. 


Add your Style preset 

We’ve created part of our banner, or badge if you 
will, using the Polygon tool, set at 12 sides, Polygon 
Options Smooth Corners, Smooth Indents and 
Star>lndent Side By 20% all active. We then select 
Layer>Layer Styles>Blending Options and apply our 
Style preset, with each Layer Style applied fully 
customisable to create the look you want. 


Save a style preset 


Perfect with Layer Styles (2) 

Finish your panel effect by adding a Drop 
Shadow Layer Style with the Opacity at 40%, Distance at 
4 pixels, Size at 30 pixels, and also the same texturing 
technique that we used in step 6. Take a moment to 
perceive the combination of effects that help to create 
one of your authentic stitch effects. 


Reactivate your Layer Styles applied to your 
panel layer at select Styles then click New Style. Name 
this Entire texture effect. Now you have saved the look 
of your panel as a preset. Now you can apply uniform 
Layer Style effects across all your layers. Finish here by 
transforming your panel layers into a Smart Object. 


Prepping for the second 
stitch effect 

Activate your logo shape layer and refrain from 
applying your Style preset. Instead apply a Stroke Layer 
Style, set at a 20 pixels Size, Position set to Outside, 
Blend Mode set to Linear Burn. Set your Color to the 
same as your Polygonal layer. Also apply a 45% Opacity 
Inner Shadow, Choke set to 35%, Size 5 pixels. 
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Create stitched effects on your webpage 


Make a work path from a 
selection 

Finish this layer effect by once again applying texturing 
effects (see step 6). Ctrl+click your logo layer Vector 
Mask thumbnail making a selection. Activate the Paths 
panel and press the Make Work Path from Selection 
button. Back in your layers panel select the type tool. 
Click in the outside of your path, apply dashes, and then 
scale inside your logo shape. 


Alternate Drop Shadow 

With this Type layer active select Drop Shadow 
from your Layer Style Options. We’re going to apply the 
opposite of what you’d normally expect. Set Color to 
pure white (#FFFFFF) and Blend Mode to Overlay. Set 
Opacity at 75%, Angle at -90 degrees, Distance at 2 
pixels. A very subtle, yet authentic effect. 



Type stitch effect 

" Once again you can add texture effects as you 
see fit. But, you must apply a Drop Shadow Layer Style, 
setting Opacity at 80%, Distance at 1 pixels, Size at 4 
pixels. The effects may seem small when zoomed out, 
but it’s this attention to detail that adds authenticity to 



70 Finalise your ribbon 


From here apply texture effects to fashion a 
complete look in your ribbon. To create ribbon edges, 
simply select the Ellipse tool, draw out a circle shape, 
place behind both your panel and ribbon layer, and 
align with the ribbon layer edge. Simply duplicate and 
place a copy shape the other side to finish the effect. 



Subtle stitch effects 

This effect is similar to the previous Type stitch, 
but is more subtle. It also seems to work best with 
straight edges. Begin by activating your Type tool and 
again typing out dashed lines, this time aligned near the 
edge of one of your ribbon layers. Use a darker 
variation of this layer's colour. 


Apply Clipping Mask 

From here you can repeat any of the above 
effects to create authentic looks. However, if you want 
photo-real textures you can easily apply these. Simply 
copy and paste in the texture about your layer (sxc.hu; 
1154337), set a Luminosity blending mode, 10% Opacity. 
Ctrl+click your layer and select Create Clipping Mask. 




CSS3 Styling 
properties 


Some of the more hardcore web 
designers may wish to look outside of 
Photoshop to create stitch effects. 
jQuery isn’t really an option, but CSS3 
now provides you with similar 
applicable styles through coding. 

However, if we’ve learned anything 
from this tutorial it’s that stitch effects 
look most authentic when they’re 
combined with several other textures 
and 3D effects, and applying code 
becomes no different. 

A nice drop shadow with a spread 
radius is a must. Here is some concise 
code to get the effect you need. Our 
Photoshop techniques don’t take too 
long, but if time is against you this is 
an even speedier solution. 

001 .stitchecLelement { 

002 border: 2px dashed 
#ffffff; 

003 box-shadow: 000 8px 
#ff0030; 

004 } 
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Create stitched effects on your webpage 


Image Interpolation 

We’ve applied a photo texture to our panel, and 
in some cases you may need to increase or decrease 
layer size to get the texture detail you want. A little word 
to the wise - when doing so make sure you’re not 
distorting pixels. Do so by selecting Photoshop> 
Preferences>General, setting the according Image 
Interpolation setting. 




effects to your type, but don’t 
over-egg it as this can disrupt 
the legibility in important 
information in your website. Use 
bold type faces - in this case 
we’ve used Tahoma and a free 
Dafont typeface, Bebas (www. 
dafont.com/bebas.font). We’ve 
added a little something extra to 
our body text, applying a 
letterpress effect. 
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Piece it all together 

Using the effects you’ve learned here you can 


now go ahead and style the rest of your panels, button 
and ribbons. We’ve applied and tweaked the supplied 
Entire effects style to our main panel and subsequent 
buttons. We’ve used the stitch effect from steps 16 and 
17 to create authentic looks. 
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Making pixel-based sites responsive 


Making pixel- 
based sites 
responsive 

Responsive sites are the must-have in 
this multiscreen environment and we 
show you how to take an existing site 
and convert it over with just a 
sprinkling of CSS 

tools I tecli I fronds Dreamweaver 
export Mark Shufflebottom 




ometimes design jobs can seem like 
they are too difficult, mainly because 
you’ve just never encountered those 
problems before and you think they’re 
going to be a chore. Responsive design 
is something you might have read about 
but never taken the plunge into - or 
maybe you’ve built a site in a tutorial, but 
you don’t want to tackle it on your own 
site because you think it involves a 
redesign. The truth is that if you have an 
existing site, most of the work is actually done. 

It’s incredibly simple to move a site over to a responsive 
layout, mainly because you’re just changing widths into 
percentages. Doing that alone will make it scale up and 
down to fit any screen size - but then there’s the difficulty of 
what happens when the columns get too small and images 
break out of the design. All of this is relatively easy to fix 
- images can be scaled easily enough, and when a design 
gets too small we can use media queries to fix them into a 
single-column design. 

So the good news is that it’s not impossible, and in this 
tutorial we are going to take a prebuilt page and show just 
how easy it is to convert it across to a responsive design. 






Respondo 



Getting started 

Copy the Start folder to your computer and 
open the index.html page in your browser. It’s a simple 
two-column, static layout for a 1280px desktop screen. 
Open the style.css file in Dreamweaver to prepare us to 
covert this to a percentage-based design. In the body 
CSS change the line height from pixel-based to 
em-based and add the font-size property. 

001 line-height: 1.2em; 

002 

003 font-size:100%; 

Fix the header 

An em is a relative unit, not fixed, so it can scale 
up and down easier. Some conversion techniques to 
responsive sites change padding to percentages, but it’s 
not really necessary to do this. Find the header rule and 
change the width from a fixed 1280px to 100% so that it 
stretches across the screen. 

001 width: 100%; 

Change the footer 

If you test in the browser now, we can see that 
we’ve made the header stretch full-width across the 
design. As the logo and header is small it will fit in small 
screen mobile designs as well as the desktop. Let’s 
make that same change within the footer, find the footer 
rule, and change its width. 

001 width: 100%; 


Centring the design 

The header and the footer stretch across the 
screen - let’s focus on the menu. This is actually much 
easier to do as it’s an inline-block. Find the menu ul rule 
and remove the width property so that the rule 
resembles the code shown below. If you save this and 
test it in the browser you will see that it displays across 
the full width of the screen. 

001 #menu ul { 

002 

003 margin: 0; 

004 

005 padding: 10px; 

006 

007 list-style: none; 

008 

009 color: #333; 

010 

011 background:#555 url(img/noise.png); 

012 

013 overflow: hidden; 

014 
015 } 

Centre the text 

The text area in the screen is aligned to the left 
while everything else fills the width of the browser. Now 
change the content rule as follows. This subtle difference 
to the width means it will hold at 1280px but collapse if 
necessary, which is important later. We add the auto 
property to the margin so that it centres left and right. 
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<Top left, clock wise> 

• The initial design has been created already to show how easy the process is to convert a website with pixel values to a responsive layout 

• Simple percentage changes make the header of the document stretch fullscreen and take advantage of the full browser width. The advantage is that this works for downscaling also 

• The initial part of the design challenge is to extend areas of the design to fill the browser. Here the menu has been extended 

• Once pixel-based positioning has been removed the design scales up and down to fit the browser. Using max-width ensures we have a fixed upper size to work to 


001 max-width:1280px; 

002 

003 margin: 20px auto; 

Not scaling 

If you test the design so far you will see that 
the design is centred but does not scale if you try to 
resize. That’s because the sidebar and main divs 
have pixel-based values. To convert it we use the 
eguation devised by Ethan Marcotte, who first 
proposed responsive design. This is shown below 
and applied to 768 pixels of the main section. Don’t 
add this yet. 

001 target divided by context = result 
002 768 divided by 1280 = 0.6 

Change to percent 

0.6 isn’t very clear as a percentage, but if we 
move the decimal place two places to the right we get 
60%. That’s better, so let’s add this to the main div 
content. If you test it, the design should look the same, 


because it’s the same width displayed as a percentage. 
It won’t scale properly until we change the sidebar. 

001 width: 60%; 

Convert the sidebar 

Find the sidebar CSS rule and change the width 


and margin as shown below. As you can see the width 
of the main area plus the sidebar plus the margin adds 
up to 100%. We didn’t really need the equation here 
because we had to make it add up to 100%, but if you 
try it, you’ll see it works. 

001 .sidebar{ 

002 


003 background:#399 url(img/noise.png); 
004 

005 float: left; 

006 

007 margin: 0 0 20px 1%; 

008 

009 padding: 0; 


010 

011 width:39%; 

012 
013 } 

Scaling the image 

Save and test in the browser. You can now scale 
the design down, but as you can see when the browser 





It’s incredibly simple to move a site over 
to a responsive layout 
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<Top left, c:loc:kwise> 

• When the sidebar moves over the image it covers it, so the image has be fixed - allowing it to be responsive also 

• Giving the image a width of 100% but also a maximum width ensures that it scales up and down yet remains within the design 

• Using media queries the sidebar is moved below the main content when the screen width gets too narrow 

• The text is made to fit the full width of the screen on smaller devices. This is true for the sidebar and the main text 

• The menu is given special treatment on mobile-sized screens so that it can be easily tapped while the user is on the go 






is small, the sidebar overlaps the image. Let’s make the 
image responsive as well; find the img CSS rule and 
change it as shown. This makes the image never bigger 
than 540px, and it will scale up and down. 

001 .img { 

002 

003 width:100%; 

004 

005 max-width:540px; 

006 

007 height: auto; 

008 

009 float:left; 

010 

011 margin: 0 10px 10px 0; 

012 
013 } 

Create a tablet layout 

Save and test the design - you will see how the 
text automatically runs around the image until the width 
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Mobile menus 

Make sure you give special 
attention to the menu in a 
mobile device. No-one likes 
trying to click on very 
small links and without the 
menu no-one can access 
your site 


of the column gets too small. It’s when that happens 
that the image scales properly. Obviously as the design 
gets too small the columns do not really work, so let’s 
create a media query in the CSS. Add this to the bottom 
of the CSS: 

001 @media screen and (max-width: 768px) { 

002 
003 } 

Moving the sidebar 

This media query is going to detect when the 
width is 768 pixels wide or less, and we will adjust the 
design for a portrait tablet. Inside the query lets update 


the sidebar so that it jumps below the main content 
area and has a wider value than it currently does. Add 
the code as shown below, which overrides the width on 
the first sidebar rule. 

001 .sidebarf 
002 

003 margin: 0 0 20px 1%; 

004 

005 clear:both; 

006 

007 width:98%; 

008 
009 }. 

Fix the main section 

If you test the design now you will see that the 
sidebar works fine; it jumps down and fills the width of 
the browser. The text in the single column however, is 
only 60% of the browser - but this is easy to fix. Again 
inside the media query add this code, which ensures 
the design uses the full width of the browser. 
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Making pixel-based sites responsive 


001 

#main { 

002 


003 

clear:both; 

004 


005 

width:100%; 

006 


007 

} 


Reset the margins 

A small clean up is required here before 
continuing. The margins are set for the design at 
desktop level, so let’s remove them in the smaller tablet 
size. Again inside the media query add the following 
code, which will just reset the margins for the text area. 
Save this and give it a test in the browser. 

001 #main .textArea { 

002 

003 margin:0; 

004 
005 } 

Detecting mobile phones 

The design scales really well, but as you get 
down to phone size notice how the menu is the area 
that struggles; it’s quite small for fingers on a mobile, as 
is the text size to read. Add another media query below 
the first that will detect when the screen starts to get 
smaller again. 

001 @media screen and (max-width: 

480px) { 

002 
003 } 

Larger text 

When using a mobile phone, the text for desktop 
browsing tends to be quite small on the handset. We are 
going to increase our body size up to 120%. The good 
news is that everything will be proportionally bumped- 
up because we have used flexible em sizes instead of 
pixels. Add the code shown below into the media query 
from the previous step. 


001 

002 

body{ 

003 

font-size: 

004 

005 

} 


Extend the sidebar 

If you check the design in the browser, you will 
see that there is some margin space around the sidebar. 
We don’t need this on mobile as we can take advantage 
of the full width of the browser in the smaller screen 
estate. Add the following code into the media query to 
change the size of the sidebar box. 

001 .sidebar{ 

002 


003 margin: 0; 

004 

005 

006 width:100%; 

007 
008 } 

Change the menu layout 

To make the menu easier to click for a mobile 
device, it’s usually a good idea to add the menu as a 
regular list down the page. To switch it back we just 
need to override the inline-block setting for the display, 
so instead we’ll change it to block. Add the code shown 
below to the media query. 


001 

#menu li { 

002 


003 

display:block; 

004 


005 

} 


Needs to be a button 

The buttons are now in a regular list giving more 
space to them, but they do not look like buttons. Adding 
the code shown to the menu li CSS rule will add a 
border line to the bottom of each button and therefore 
add some definition of the area that’s clickable for each 
of the buttons. 


001 

border-bottom-color :#FFF; 

002 


003 

border-bottom-style:solid; 

004 


005 

border-bottom-width:lpx; 


Still needs work 

The buttons definitely look much better now as 
the dividing lines have defined each area making it a 
button. The text still looks a little odd on the buttons 
and that is because the text is aligned to the left. Let’s 
centre the text on the buttons, giving the ‘menu li’ more 
impact on the screen. 

001 text-align:center; 

Finishing touches 

The last refinement we need to make for the 
buttons list items is to give them a little more space for 
each of the buttons which can be achieved simply by 
adding a little padding to the menu li CSS rule. Adding 
the padding will help fingers to press each button easier 
on the smaller screen. 

001 padding:5px; 

Full width 

In order to make the buttons take full advantage 
of the width of the display, as with the other areas of the 
site’s design, we need to remove any padding and 
margins from the outer container. In this case it happens 











to be the unordered list, so add the code shown below 
to the media query. 

001 #menu ul { 

002 

003 padding: 0; 

004 

005 margin: 0 0 20px 0; 

006 
007 } 


Save and test 

Now that we’ve added all of the code to the CSS, 
save the file and open the HTML page in the browser 
again. We now have a fully responsive design that scales 
to differing widths, but has break points (the media 
queries) that allow the design to reflow as the width of 
the device it is viewed on shrinks. 




Analytics to 
the rescue 

If you use any form of 
analytics you will be able 
to see what devices and 
screen sizes are targeting 
your site. Aim your 
responsive designs at 
these resolutions first. 



Flowing text around 


You will have noticed from the design of 
the webpage that we are flowing text 
around the image in the design. This has 
been done specifically to show that text 
and image combinations can work 
together within a responsive design. The 
image was floated to the left in order to 
make the text flow around the image. As 
the column reduces down in percentages 
when either the browser is resized or 
navigated to on smaller devices, then the 
text becomes squashed in. It’s not ideal to 
have the text too thin at the edge of the 
image so look at your break points in the 
media queries and try and find a good fit 
for the image. Of course, there’s nothing 
to say you need to make your text flow 
around an image at all. 
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web workshop 


Digital first for 
DuJour Magazine 

inspiration www.dujour.com 



INSPIRATION 


Unified publishing 

Rather than creating separate 
experiences for the print and digital 
magazine, iPad and website, Code and 
Theory developed a single-view site that 
houses editorial, advertising and photo 


arlier this year, Jason Binn desktops and tablets alike, while showcasing 
decided to create a new ongoing editorial updates and the full run of 

luxury, lifestyle and fashion current issues. 


galleries. To ensure navigating the site 
was a seamless experience, Code and 
Theory designed an infinite scroll format 


website to showcase DuJour Working side-by-side they embarked on 


that allowed for undisrupted exploration 



FEATURE 


TOP 5 

von 




NICOLE RICHIE IS 
PRIVATE RICHIE 


NICOLE RICHIE 


THE BEST OF 
BACKSTAGE 
BEAUTY: NEW YORK 

FASHION WFFK 


Hidden menu 

The menu is located off 
on the left-hand side of 
the page. Clicking the 
yellow button causes 
the content to slide on 
from the left to reveal 
magazine information. 


Easy reading 

The goal of the 
site’s design is for 
reading it to be as 
easy and clear as 
reading the print 
version of the 
magazine. 


Content 

New content is 
brought into the 
digital experience 
daily, keeping the 
online magazine 
fresh at a pace not 
possible in print. 


Print to screen 

The homepage of 
the magazine 
strongly represents 
the cover of the print 
magazine, with the 
top stories available 
to jump to. 


Scroll for more 

The user can just scroll 
down on the site and 
this will reveal each 
page of the magazine in 
turn; allowing a simple 
navigation metaphor to 
work online. 


Sliding tabs 

The table of contents is located on 
the right-hand side of the page, 
Clicking the tab causes this to slide 
onto the page with a list of 
thumbnails for each magazine 
double paged spread. Content can 
be clicked on to jump to that section. 


magazine (www.dujour. 
com). To do this, he combined 
print magazine design 
quality, with an adaptive web 
publishing model. 

To accomplish this feat, Binn approached 
Code and Theory to develop a digital 
experience that could function flawlessly on 


designing a full digital experience on the 
web as the first print issue of DuJour 
was being created. To do this well, 
simplicity was key. The online 
magazine exists as one long 
scrolling page with the relevant 
content loaded at the 
appropriate time. 




The visual web 

Visual content is placed at the 
forefront of this online magazine, to 
keep the presence extremely similar 
to the print edition of the magazine. 

This shows how far the web has 
come as a design medium, with rich 
magazine design becoming more 
easily created for the web. 


and keeps users on the same single 
webpage. Users can browse through 
photo stories, dive deep into editorial 
content or just scroll through 
highlighted stories one after 


another. Each individual piece of 
content is shareable to a variety of 
social media through deep links. 


SIGN UP / LOG IN 
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Digital first for DuJour Magazine 



<comment> 

What our 
experts think 
of the site 


One page wonder 

“The print emulation of this website’s design is created to be as easy-to-read as 
possible, so there is really only one way to read and that is to scroll down 
through the content like you would read through a magazine. Being a digital 
version, there is a handy inclusion of a contents page that can enable the 
reader to jump to any spread of pages.” 

Mark Shufflebottom 



TECHNIQUE Sliding side panel 


Create the panel 


Create a new HTML page, and in the body 
section add the div tags as shown below. This is the 
panel that will slide in from the side and the switch that 
will be pressed to make the panel slide in and out from 
the right-hand edge. The switch has a less-than symbol 
displayed as an arrow, but you could use an image icon. 


Add the jQuery 

" Still in the head section, add the script tag and the 
remaining jQuery code - this adds a variable that tells us 
whether the side panel is on the screen or not. The 
document-ready function allows jQuery to add a click 
function to the switch when it loads. If the on-screen variable 
is true then the panel is slid off to the right. 


001 <div id="panel”>Panel</div> 
002 <div id="switch">&lt;</div> 


Style the document 

Move up to the head section of the document 
and add the link to jQuery and the style tag. Add the 
CSS rule for the body and html that sets the margin and 
padding to 0, with the height of the document set to 
100% which enables the panel to also be 100%. The 
overflow is set to hidden to avoid having horizontal 
scroll bars. 


001 <script> 

002 var onScreen = false; 

003 $(document).ready(function() { 
004 $(“#switch”).click(function() { 
005 if (onScreen){ 

006 $(“#panel”). 

animate({‘right’:’-400’}, 
‘easeOutSine’); 

007 $(‘#switch’). text(‘<’) ; 

008 onScreen = false; 

009 } 


001 <script src=”http://code.jquery. 
com/jquery-latest. min. js"x/script> 

Add to your CSS 

If the panel is not on the screen it is slid on, using this 

002 

<style type=”text/css”> 

code. Notice that the text in the switch div tag is changed to 

003 

004 

body, html { 
margin: 0; padding: 0; 

a greater-than symbol (>). This shows that the switch now 
controls the side panel to slide back out. Save this and test it 


height: 100%; overflow: hidden; 

in the browser to see the sliding side panel on the right of 

005 

} 

the screen. 



TECHNIQUE 

Recreating 
the logo 


The online magazine uses a classic 
title-based logo, often seen in print, and here 
we show you how to leverage the power of 
Illustrator to recreate the logo by 
manipulating the letter forms. 


Add the text 

Open Adobe Illustrator or a similar 
tool and use the Text tool to add the title as 
shown. We’ve used Bodoni as the typeface 
and changed the ‘Jour’ part to bold, so there 
is a slight difference in the emphasis. 



Convert to paths 

* Select the text, and from the type 
menu choose Create Outlines. The text is 
not editable as text now but editable as a 
vector shape. Switch to the direct selection 
tool, which is the white pointer tool, ready to 
manipulate the text. 



Style the document (2) 

™ Continue styling the page by making the panel a 
mid grey colour, it will be the full height of the browser 
and 400px wide. The position will be off the screen to 
the right. The switch that controls the sliding panel is 
made to have a yellow background and also positioned 
to the right, but halfway down the document. 

001 #panel { 

002 background-color: #999; width: 

400px; 

003 height: 100%; position:absolute; 

004 top: 0; right: -400px; 

005 } 

006 #switch { 

007 background-color: #FF0; position: 
absolute; 

008 top: 50%; right: 0; 

009 cursor: pointer; 

010 } 


001 

else { 

002 

$("#panel”). 

animate({'right':'0'}, 'easeOutSine'); 

003 

$( ’#switch ' ).text(’>’) ; 

004 

onScreen = true; 

005 

} 

006 

}); 

007 

}); 




Manipulate the letter 

Click and drag around the bottom- 


half of the letter J. Now click and move this 
down and to the right to create the letter as 
shown in the screenshot. You can also move 
the letter closer to the others after you have 
finished manipulating it. 
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Master retro looks 
with Photoshop 

inspirationwww.castirondesign.com 


etro styles have gripped 
the digital design world, 
dominating other trends 
across the discipline. In 

previous issues of Web 
Designer we’ve looked at 
the reasons behind this 
trend, but here we’re 
showing you how to master some of 
the most useful Photoshop tools to 
produce your own stunning styles. 

We’ll be exploring how to create 
digital textures to replicate real-world 
examples using the Photoshop Pattern 
Fill layer style. We’ll also reveal how you 
can create grain effects using 
Photoshop brushes and blending 
modes, all inspired by the designs at 
www.castirondesign.com. This is a 


great example of not just the 
application of effects, but also the use 
of vintage typography to produce a 
recognisably old-school look. 

Well also look at ways you can use 


Photoshop Actions, which we have 
treated you to a selection 
of on our resource 
disc. Enjoy! 


Retro looks 


Type, bitmap textures, 


and colour combine 


to give this site the 
complete retro look. The 
visual outcome is 


something that offers a 


sense of history and 


unique character. 



<comment> 

What our 
experts think 
of the site 


A website to last a lifetime 

“The design for our site was inspired by our company’s namesake, 
the cast iron skillet. A skillet lasts a lifetime, and each one has a 
sense of history and unique character. Subtle texture was 
incorporated in most of the design components using a variety of 
scanned-in materials, which were then bitmapped to create organic 
texture that maintained a small file size. The cast iron skillet had its 
heyday in a time when products were simple and efficient, yet 
advertisements were wordy and hyperbolic. We used a type-heavy 
design to reflect that time period’s voice.” 

Jonathan J Black, Cast Iron Design Company 





Texture- 

Subtle texture was 
incorporated in most of 
the design components, 
using a variety of 
scanned-in materials to 
give the site a more 
tangible finish. 
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Branding- 

The design for this site 
was inspired by the 
company’s namesake, 
the cast iron skillet. A 
skillet lasts a lifetime, a 
metaphor for the 
longevity of their 
customer service. 


Apply bitmap - 

The textures in the 
website were bitmapped 
to create a more organic 
looks that maintained a 
small file size. 


SCREAM-O-RAMA POSTER 


Checkout our three part blog 
post about our recent poster for 
The Loft Cinema. 



INSPIRATION 

Retro showcase 
atline25.com 


Looking for inspiring examples online, for 
your retro web design projects? Look no 
further than Iine25.com. This site 
describes itself as a ‘drawing board of 
creative web design’ and its blog on 30 
inspiring retro-style websites is a real 
delicacy. Our favourites presented include 
our very own www.castirondesign.com, 
as well as bitfoundry.ca and the 
wonderful thislandishovland.com. 
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Master retro looks with Photoshop 




RESOURCES 


Using retro 
Actions 


Photoshop Actions are an extremely 
useful asset to have when creating 
vintage looks in your designs. These can 
be applied to all web elements - in 
particular, photographic images. 

You can activate the Actions panel 
from the Window drop-down menu. 
From this panel select the fly-out 
options, choosing Load Action to add 
those supplied in the Retro Photo 
Actions pack to your presets. Just click 


LJUpEI L-dtC 


the Play button to automate the effects. 

You can find tons of useful actions also 

online, available from content providers. 

www.deviantart.com is a real hotspot 
for this kind of thing. These work out 
cheaper than most plug-ins. 
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Delete 

Play 

Start Recording 
Record Again... 
Irtseri Menu Item... 
Insert Stop... 

Insert Path 

Action Options... 

Playback Options... 

Clear All Actions 
Reset Actions 


Load Actions.... 


Replace Actions... 

Save Actions.^ 



TECHNIQUE 


Retro textured 
web header 


New document 


Open Photoshop and select File>New. 
Set Width at Ipx, Height at 3px. Zoom in to 
your layer at 3,200% and select the Rectangle 
Marquee tool. Make a selection at the top of 
your layer covering Ipx (a third) of your layer. 


Fill this with black (Shift+F5). 


Save Pattern preset 


Deactivate your selection (Cmd/Ctrl+D) 
then select Edit>Define Pattern. Name this 
pattern ‘Retro texture horizontal’. Select 
lmage>lmage Rotation>90 degrees CCW. 
Once more, select Edit>Define Pattern, saving 
as ‘Retro texture vertical’. Now you have 
effectively created the building blocks for a 
retro texture in Photoshop, applicable from 
your Layer Style options. 



1,536px, Height at 2,048px. Add a #B6AC95 
colour to your background. Draw out your 
header backdrop using the Rectangle shape 
tool. We’ve used a #D1C4AA colour. Now 
activate the Layer Style options (fx) from the 
foot of the Layers panel, and Pattern Overlay. 


04 Add noise texture 


We’ve applied the Retro texture 
vertical pattern at 8% Opacity. Next, create a 
white web header shape and apply Filter> 
Noise>Add Noise. Set your Amount between 
25% and 30%, activating Uniform and 
Monochromatic. Set the layer blending mode 
to Multiply, with Opacity at 25-30%. 


05 Add a scatter brush 


Create a new layer, blending mode set 
to Dissolve, Opacity 1% and Fill 10%. Select the 
Brush tool. Set Brush Size at 2,500px and 
Hardness at 0%. Press F5 and activate the 
Brush Tip Shape options. Set Spacing at 
1,000%. Deactivate all other option sets. Click 
your brush once on your new layer. 


Final layer styles 

Duplicate, invert (Cmd/Ctrl+I), resize 
and reposition your duplicate layer. You can 
now merge these two layers and edit the 
strength of the effect through layer opacity 
values. Finally, add a subtle Drop Shadow 
layer style to your header shape to create the 
illusion of 3D; set Opacity at 20%, Size 20px. 
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■Design 

^Clondi 


Get your site seen, or suggest a theme 

Tweet us with the URL or topic % @WebDesignerMag 

Amazing creative footers 

An unsung hero of every great website, the footer 
might not be an obvious space for creative design, 
but here are 24 ways in which it can be done well... 
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design cloud 




















































Email us & webdesigner@imagine-publishing.co.uk 


<clesign<:loucl> 

Amazing creative footers | 


01 

02 

03 

Left-hand page 


13 

14 

15 

Riglit-liand page 


04 

05 

06 

1. adfinance.cz 

2. bienemaya.com 

7. guachy.com 

8. iemai.com.br/blog 

16 

17 

18 

13. www.poogansporch.com 

14. rawkes.com 

19. welovemilano.barclays.it 

20. www.googleventures.com 

07 

08 

09 

3. branded07.com 

4. bristolarchiverecords.com 

9. infinvision.com 

10. ironladiesgolfsociety.com 

19 

20 

21 

15. shareastory.org 

16. sohofixed.com 

21. www.hipstamatic.com 

22. www.kickstarter.com 

10 

11 

12 

5. designbombs.com 

6. familysearch.org 

11. onstcreative.com 

12. pepperplane.com 

22 

23 

24 

17. studionudge.com 

18. tapbots.com 

23. www.nlmissions.com 

24. www.vimeo.com 
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WANT TO MASTER 
PHOTOSHOP? 
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THIS 

COVER 
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Inside every issue: ^ ® 1 ^ UTAi I 2 

► Over 45 pages of pro techniques 

► Inspirational artwork and interviews 

► In-depth features on cutting-edge trends 

► The latest creative products reviewed and rated Advanced 

@advancedpshop /AdvancedPhotoshop Photoshop .co.uk 


Get your copy today ^ile /Android 



Quality print edition on sale at imagineshop .co.uk 


Interactive digital edition on all platforms on sale at 


www.greatdigitalmags.com 


Also available at all 
good newsagents 
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Build a JavaScript app 
using Deferred Objects 


Discover how to implement the function in a 
practical project Page 92 


Make a web app with 
Groovy and Grails part 2 


Add authentication and security roles to the 
web app created in part 1 

Page 88 
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TUNE UP YOUR WEBSITE 


Debugging performance 
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J avaScript development has come a long way 
in recent years, and with that progress has 
come a new set of challenges and difficulties 
when it comes to application performance. 

In the past, you might have added some 
jQuery effects to your page to hide or reveal 
text or buttons, loaded in some content with 
AJAX, or appended new elements to the 
DOM. But this was more or less always done in only 
a few places on the page, and only a few times for a 
given pageview. If you made a mistake that created 
dozens of objects in the memory and never cleaned 
them up, it usually wouldn’t matter since the user 
would soon navigate to another part of your site, 
and you’d get a clean slate to start again. Likewise, 
if you ever encountered the ‘a script on this page 
has become unresponsive’ error, it was almost 
always because of a simple coding error resulting in 
an infinite loop. 

With the rapid growth of the single-page 
application style of site, however, as well as 
widespread adoption of so-called MV* JavaScript 
frameworks such as Backbone.js, Ember.js, and 
AngularJS, these assumptions no longer hold true. 
You might need to execute hundreds or thousands of 
operations to render out all the elements of a 
complex application, which might well run into the 
browser’s execution limit and cause it to halt your 
script. In addition, the user might interact with your 
page for several minutes or several hours without 
refreshing or navigating away from it, so it can be 
easy to accidentally consume an ever-increasing 
amount of memory. 

These new challenges can be daunting, especially 
for new developers. Fortunately, there are some very 
good browser-based profiling tools for tracking down 
these problems, and some simple techniques we can 
use for resolving them. 

Chances are you’re already familiar with the 
excellent set of developer tools available in Google’s 
Chrome browser. However, it’s more than likely that 
you’ve spent most of your time using the inspector in 
the Elements, Network, Console, and perhaps 
Resources tabs. 

The performance debugging tools we’ll be looking 
at in this article live in the Timeline and Profiles tabs. 



MEMORY TIMELINE 


| j The Timeline tab allows you to map a 
chart of a page’s memory use over time. 
This is a great way to begin your 
investigation into potentially sluggish performance: if 
your app is leaking memory like a sieve, it will 
become quickly apparent. 

To use the Timeline, open the Web Inspector 
(Tools>Developer Tools from the Chrome menu) and 
select the Timeline tab. Select Memory from the 
left-hand menu. At the bottom of the developer tools 
panel, there’s a solid circle icon (Record) which is 
used to begin recording the timeline. Click this, then 





Memory 


Fig. 1: A normal memory timeline - memory increases over time as new objects are created, and then decreases sharply when unneeded 
ones are cleaned up by the browser’s garbage collector 
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Fig. 2: This memory timeline clearly indicates something is going wrong - none of the objects being created can be garbage collected, 
so memory use will continue to climb indefinitely 



interact with your page for a few seconds and you’ll 
see the timeline begin to appear. Under normal 
circumstances (assuming your app isn’t leaking 
memory), you’ll see the amount of memory used 
increase and decrease over time, generally returning 
to a baseline level. However, if there’s a problem, you 
might see memory use continue to increase 
indefinitely and exponentially. 

Figure 1 shows an example timeline taken from a 
popular music streaming site, which is a good 
example of a big, complex, single-page JavaScript 
application. Notice that memory use increases over 
time, and then decreases suddenly every once 
in awhile. This is the result 
of JavaScript’s garbage collector 
regularly freeing up any bits of 
memory used by objects that are 
no longer needed. 

How does the garbage 
collector know that an object 
can be removed from 
memory? To be frank, the 


details are beyond the scope of this article, but in 
short, if an object can still be accessed by a reference 
to it, it won’t be garbage collected. For example, if 
you select a DOM node with jQuery and assign it to a 
variable, but later assign the value null to that 
variable, the jQuery object is essentially ‘orphaned’ 
and can be cleaned up (assuming you haven’t set 
other references pointing to it). 


































TUNE UP YOUR WEBSITE 
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Fig. 5: Comparing two snapshots shows object size differences 


Fig. 6: Selecting Comparison shows how objects have changed 
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Figure 2, for example, shows what happens when 
the Timeline is run with a page designed to consume 
more memory each time a button is clicked. 

This is exactly the kind of memory timeline you’d 
rather not see for your applications. But now that 
you know you’ve got memory leaks, how do you go 
about locating them so you can resolve them? 
Chrome’s web developer tools have a few more 
features that will help us narrow our search. 


HEAP SNAPSHOTS 

The next area of the web inspector we’ll 
be looking at is the Profiles tab. This 
actually consists of three separate tools 
grouped together because they behave similarly. Of 
the three, we’ll concern ourselves primarily with the 
first and last: CPU Profiles and Heap Snapshots. 

Heap Snapshots are particularly useful for tracking 
down memory leaks, so let’s start there. When you 
select Take Heap Snapshot from the Profiles tab and 
click Start, Chrome will take a snapshot of all the 
objects and DOM nodes that currently reside in the 
memory for the current page. 

Once the Snapshot is complete, you can select it 
from the left panel and explore the list of all the 
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Fig. 3: Heap Snapshots show you not only the total size in memory of all the JavaScript objects on the page, but also a detailed breakdown 
of those objects and their contents 


objects that were present at the time of the snapshot. 
Figure 3 shows one example of a Heap Snapshot. 

Since most of the objects that JavaScript has in 
memory at any given time are native to the browser, 
and not related to your code, these snapshots can be 
very difficult to navigate. However, the real benefit 
comes when you compare two snapshots. In the 


objects have changed between your selected 
snapshot and another one, as Figure 6 helpfully 
illustrates for us. 

Then it’s merely a simple matter of ensuring that 
those objects are discarded when they’re no longer 
needed, usually by setting the variables that refer to 
them to null. 


U HEAP SNAPSHOTS ARE PARTICULARLY USEFUL 
FOR TRACKING DOWN MEMORY LEAKS U 


figure above, you can see that the two snapshots are 
almost exactly the same size. This would correspond 
to a flat line in the memory Timeline we saw earlier. 

If, however, you took snapshots after the amount of 
memory used by the page had grown significantly, 
the snapshots would be noticeably different as well. 

Try sorting the columns by size, and see if any 
objects or arrays appear near the top of the list in the 
later snapshot that were absent or much lower in the 
earlier snapshot. Investigating those, you’ll often find 
familiar object structures, as they will have been 
created by your code. This can frequently provide a 
great insight into which of the objects you’re creating 
are chewing up all that memory. 

Chrome also provides some more 
sophisticated ways of comparing Heap 
Snaphsots. At the very bottom of the web 
inspector panel when you’re 
viewing a snapshot, there are two 
menus, shown in Figure 5. If, 
instead of All objects, you 
select Objects allocated 
between snapshots 1 and 
2, you’ll be able to see new 
objects that might be 
contributing to the 
increase in memory usage. 
Even more useful, if you 
select Comparison instead of 
Summary, you’ll be able to see how 


CPU PROFILES 

CPU Profiles allow you to record your 
page’s JavaScript execution over its 
lifespan. It also provides a breakdown of 
where the browser has spent the majority of its time. 
This information can be invaluable when you need to 
track down code that is inefficient. For example, if 
you happen to discover that your page is spending 
60 per cent of its JavaScript execution time inside a 
short function, you’ve got a good place to start your 
optimisation efforts. 

Collecting a CPU Profile is much the same as 
taking a Heap Snapshot: in the Profiles tab, select 
Collect JavaScript CPU Profile, and click Start. You’ll 
see the profile recording in the left-hand panel. Once 
you’ve interacted with the problematic parts of your 
application, you can click Stop, then select the profile 
and inspect it. 

The Self column gives you the amount of time 
spent inside each function, while the Total column 
adds in time spent in functions called by that 
function. You can expand each function to see a 
trace of where it was called from, and also click on 
the filename to see the function highlighted in the 
source code. 

Figure 4 shows how a bit of digging can reveal 
where a problem lies. At first glance, most of the 
execution time seems to take place inside of jQuery, 
which isn’t much use to us. However, traversing back 
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To get a full insight into how the Web Workers API operates, visit the Mozilla Developer Network: developer.mozilla.org 


up through the trace, we find the place in our code 
where all these expensive jQuery calls are 
originating: line 3 of main.js. 




USING TIMERS TO WORK AROUND 
EXECUTION LIMITS 

Most often, you’ll be delving into these 
browser tools to try to ameliorate an 
application’s sluggish performance. But sometimes 
you’re dealing with a more serious issue: the browser 
locks up completely while trying to perform some 
complex operation, and alerts that a script on the 
page has become unresponsive. 

Some browsers will alert this warning after a given 
number of script instructions have been executed, 
while others allow the script to run for a set number 
of seconds, but the core problem is the same: your 
script is trying to do too much in a single go. 
Sometimes you’ll be able to make your code more 
efficient, requiring fewer operations to reach the 
same result. However, this won’t always be possible. 

The ideal solution to this problem is to use the 
Web Workers API introduced in HTML5, which allows 
you to delegate certain operations to background 
processes that won’t lock up execution of your script. 
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Fig. 4: Although much of the CPU time spent by your application will take place inside library code, a bit of digging will reveal which 
of your functions is to blame 
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For example, let’s say you have a large array of 
Backbone views that you want to render, and 
rendering each of them requires a fair amount of 
processing: enough that your loop is causing the 
script to lock up and the browser to complain. Your 
code looks like this: 


001 for (var i=0; i < myViews.length; i++) { 


var view = myViews[i]; 


view.render(); 


Instead, you can move your renders into timers: 


1 001 function renderViews(views) { 

5 3 

3 setTimeout(function() { 


var view = views.shift(); 


However, web workers come with two significant 
limitations: they’re not supported in Internet Explorer 
(surprise surprise) below version 10 (which has yet to 
be released), or in the default Android browser 
(though they are supported in Chrome or Firefox for 
Android). What’s more, the background jobs have to 
be self-contained JavaScript files, and they run in a 
sandbox without any access to the rest of your 
scripts. That means no jQuery, and none of your 
Backbone models or views. 

If you’re able to isolate some pure JavaScript 
heavy lifting that can easily be isolated from the rest 
of your code, and you’re happy with the level of 
browser support afforded by web workers, they’re a 
great solution. That said, a discussion of the Web 
Workers API is beyond the scope of this article. If 
you’re interested in learning more about the API, the 
Mozilla Developer Network has an excellent article 
covering all the basics at developer.mozilla.org/ 
en-US/docs/DOM/Using_web_workers. 

However, if those conditions don’t apply to you, 
there’s still a way out. Using JavaScript’s built-in timer 
functions, you can split out your one giant execution 
thread into a series of callback functions that will 
execute over a short span of time, giving the browser 
the illusion that your script has completed. 


view.render(); 


if (views.length > 0) { 


setTimeout(arguments. 


callee, 20); 


018 renderViews(myViews); 


The timer renders the view, then sets up another 
timer to render the next view 20 milliseconds later. To 
the user, the views will appear to be drawn instantly, 
and the browser will happily run your script for as 
long as it takes, since each render takes place in a 
callback function, rather than taking place in the 
original operation. 

You’ll need to adapt this idea a little for your code, 
but the idea should be clear: rather than performing 
your computationally intensive processes directly 
inside the loop, spin them out into timer callbacks. 


GET UP TO SPEED 


Debugging and resolving JavaScript performance 
problems can be tricky - certainly much trickier than 
debugging coding errors. But with the help of the 
strong diagnostic tools that are present in modern 
browsers, and in Google Chrome specifically, it 
becomes a little bit easier to locate the source of a 
problem and begin to think about how to resolve it. 
Combine this with a little bit of know-how about 
improving performance, and your application should 
be speeding along in no time. 
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Build a web app with Groovy and Grails part 2 


Build a web app 
with Groovy & 
Grails part 2 

Add authentication and security roles 
to your Grails application using a 
helpful plug-in 

tools I tecli I trends Grails, Groovy/Grails Tool Suite 
experts Matt Gifford 



T hanks to the command-line 
interface and tooling, a good 
portion of creating web apps with 
Grails is automated. However, all 
URLs and controller actions are 
openly accessible to visitors. When 
developing systems that allow for 
content management, it’s important 
to add security features to stop unwanted access. 

In this tutorial we will use authentication rules and 
processes to add security restrictions to editable 
content using the Spring Security Core plug-in, which 
will help us to define user objects, assign roles and 
handle database input and encoding. 

We will also create a new layout template to add a 
styled user interface to our default homepage, and use 
tag library features to read content from calling pages. 

Thanks to Grails’ infrastructure, we can keep our 
code modular and reusable as possible, which will assist 
in code maintenance and ease workflow development. 


Install security plug-in 


Let’s start by installing the Spring Security Core plug-in into our 
existing application. Open the command prompt interface by right-clicking on 
the TaskManager project folder and selecting Grails Tools>Open Grails 
Command Prompt. Enter the following command to install the plug-in: 

001 grails> install-plugin spring-security-core 

Create classes 

Following a successful installation of the plug-in, you will be notified in 
the command output to run a new command, which will generate the 
minimum required domain classes to use with the security authentication 
processes. Enter the following command into the prompt to create two 
classes, User and Role, which will be generated for you. 

001 grails> s2-quickstart org.example.taskmanager User Role 


SHA-256 algorithm, but we can change this to a number of alternatives. Add 
the following line at the bottom of the Config.groovy file to use bcrypt. 

001 grails.plugins.springsecurity.password.algorithm = 'bcrypt' 

Bootstrap users 

" Open conf/BootStrap.groovy within the IDE. Here, we will set a default 
user with the correct administrative roles so that we can log into the 
application’s restricted pages. First, we need to import the new domain 
classes we created using the Spring Security plug-in. Add the following 
imports to the top of the file before the opening class definition. 

001 import org.example.taskmanager.Task 
002 import org.example.taskmanager.User 
003 import org.example.taskmanager.Role 


004 import org.example.taskmanager.UserRole 


Check config 


The s2-quickstart command has created the domain classes, 
controllers and GSP view pages for you to handle the user interface and 
layout for the login form page. It has also added some extra parameters to the 
conf/Config.groovy file to configure the paths to the domain classes. Open up 
the file and at the bottom you should see code similar to the following: 


06 Define Role 


Now we can create our default roles - one role for an administrator, 
and the other role for a standard user. We will also create a dummy user 
account for testing purposes and grant that user with administrative rights by 
assigning the correct admin role to them. Place the following code within the 
init definition. 


Added by the Spring Security Core plug-in: 


001 grails.plugins.springsecurity.userLookup.userDomainClassName = 
'org.example.taskmanager.User' 

002 grails.plugins.springsecurity.userLookup. 
authorityJoinClassName = 'org.example.taskmanager.UserRole’ 

003 grails.plugins.springsecurity.authority.className = 'org. 
example.taskmanager.Role’ 


001 if (!User.count()) { 

002 def adminRole = new Role(authority: 'ROLE_ADMIN'). 
save(failOnError: true) 

003 def testUser = new User(username: 'coldfumonkeh’, 
enabled: true, password: 'mypassword’) 

004 testUser.save(failOnError: true) 

005 UserRole.create testUser, adminRole, true 
006 } 


Alter encryption 

The Spring Security plug-in manages a lot of the daunting tasks of the 
authentication process for you, including the automatic encryption of user 
passwords before saving them into the database. By default this uses the 


07 Annotation class 


With the user defined, we can now start to apply the access 
restrictions. Open TaskController.groovy in the IDE. First, we need to 
import the required classes and references from the Spring Security 
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• The Spring Security plug-in will handle the authentication and user management for us 

• Having installed the plug-in, the console output will inform you of the next steps to take 

• Checking the dbconsole, we can see that the default user details set via the Bootstrap file 
have been stored 

• The default authentication screens generated by the Spring Security plug-in can be 
adapted to suit your requirements and visual design 


framework. Add the following import definition before the opening class 
definition within the task controller file. 

001 import grails.plugins.springsecurity.Secured 


08 Secure everything 


We want to restrict access to all of the views offered through the 
TaskController.groovy file. We can do this on a per-definition basis, setting the 
security restriction for each individual action, or by setting one rule to cover 
the entire controller, which well do in this case. Add the following code before 
the opening class definition. 


001 @Secured([’ROLE ADMIN’]) 


002 class TaskController { 


Run application 


Let’s run the application to generate the new user access definitions 
and roles set in the Bootstrap.groovy file. Open the Grails Command Prompt 
window and enter the required command to run the application. Once 
complete, the new user details should be stored in the database for us. 


001 grails> 


run-app 


Check database 

Open up the dbconsole tool in the browser by visiting localhost:8090/ 
TaskManager/dbconsole and login with the database security credentials as 


Documentation 

There are a lot of features 
and functions in Grails to 
help create dynamic, 
scalable applications. The 
online documentation is a 
great resource 
to reference. 


defined in the conf/DataSource.groovy file. Run a select statement against the 
USER, ROLE and USER_ROLES tables to ensure the data has been successfully 
written to them. 

Attempting access 

Browse to the root of the site (localhost:8090:TaskManager). This will 
display our home screen, complete with the task list. If we click on a task item 
link to edit its details, we should now be presented with a login screen, 
complete with remember me functionality. Very handily, the user interface for 
the login pages has also been created for us by the plug-in, negating the need 
for us to do so. 


Logging out 


At the moment we don’t have a clear way of logging an authenticated 
user out of our application. The Spring Security plug-in provides us with a 
number of GSP tags that we can use within our views, which use the sec 
namespace. Open Views>Layouts>main.gsp and add the following within the 
footer div element. 
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001 <sec:ifLoggedIn> 

002 Logged in as <sec:username /> 

003 <g:link controller=”logout" action="index">Logout</g:link> 
004 </sec:ifLogged!n> 


Revised homepage 


Open Views>Home>index.gsp. At the moment this page does not 
contain any core HTML structure. To use this content with our forthcoming 


001 <link rel="stylesheet" href="${resource(dir: 'css', file: 
'homestyle.css’)}" type="text/css"> 


15 Layout template 


Let’s create a new layout for use with our default home page. Create a 
new file called ‘homelayout.gsp’ within the Views>Layouts directory. This will 
hold the main HTML template to render our view page, with the exception of 
the actual body content which will come from the view itself. Full code for this 


layout template, let’s update this to include the following code. Place the 
existing content in this file between the body tags. By creating this definition, 
we will be able to reference elements for use within the layout template. 

layout is included in the project files. 

001 <div id="main"> 

002 

<header> 

001 <!doctype html> 

003 

<div id="logo”> 

002 <html> 

004 

<div id=”logo_text"> 

003 <head> 

005 

<hl><a href="${createLink(uri: '/’)}">Grails<span 

004 <title>Grails Task Manager</title> 

class- 

’'logo colour”> Development</span></a></hl> 

005 <meta http-equiv=”content-type" content=”text/ 

006 

<h2>Reusable layouts with Grails.</h2> 

html; charset=UTF-8” /> 

007 

</div> 

006 </head> 

008 

</div> 

007 <body> 

009 

<nav> 

008 

010 

<ul class="sf-menu" id="nav"> 

009 </body> 

0ii 

010 </html> 

012 

</ul> 


013 

</nav> 

Reference assets 

014 

</header> 


To apply a new stylesheet to our layout we can call a dynamic 
reference to the homelayout.css file. Any static files, including images, are kept 
within the web app directory of the project. Add the following to the head of 
the view page. This will call the correct resource from the CSS directory. 


Navigation 

We now need to add the navigation elements into the template to 
handle the display of the links to log in and log out for users. Once again, well 
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make use of the Spring Security tag library to handle the display of the links use the applyLayout tag. Wrap the content of the view page with this tag, 

based on the user’s current authentication. Place this between the nav tag specifying the name of the template to use. All calls to this page will now use 

within the homelayout.gsp file. the new template. 


001 <ul class="sf-menu" id="nav"> 

002 <li class=”selected"><a href="${createLink(uri: 7’)}">Home</ 

a></li> 

003 <sec:ifLoggedIn> 

004 <lixg:link controller="logout" action="index">Logout</ 

g: linkx/li> 

005 </sec:ifLoggedIn> 

006 <sec:ifNotLoggedIn> 

007 <lixg:link controller="login" action="index">Login</g:linkx/ 

li> 

008 </sec:ifNotLoggedIn> 

009 </ul> 

Layout title 

When using reusable layouts, we want to be able to use as much of the 
existing information from the decorated view page as much as possible, which 
includes the title, if available. We can use the grails layoutTitle tag within the 
layout file to read this value, or use a default value if one is not present. 

001 ctitlexg:layoutTitle default-’Task Manager”/x/title> 

Layout head 

We set the reference to the CSS file for the new layout within the view 
page. This means we can use individual stylesheets for each page, but we still 
need the layout to call these into play. For this, we can use yet another Grails 
tag called layoutHead, which will use any content located within the calling 
page’s head tag. 

001 <g:layoutHead /> 

Getting body content 

With the layout template more or less complete, we now need to 
define the body content to display from the decorated page. Once more, 

Grails makes this easy with the use of another tag called layoutBody. Place this 
within the content div block in the layout file. This will display all content from 
between the calling page’s body tags. 

001 <div id="site content"> 

002 <div class=''content"> 

003 <g:layoutBody/> 

004 </div> 

005 </div> 

Include JavaScript 

As we reference and include stylesheets and other assets dynamically, 
we can do the same when including JavaScript libraries or files into our 
application. Before the closing body tag in our homelayout.gsp file, add the 
following code to load the jQuery library directly into the application. 

001 <!— javascript at the bottom for fast page loading —> 

002 <g:javascript library=”jquery" /> 

003 <r:layoutResources /> 


Apply layout 


With the layout complete, we now need to ensure our view page uses 
the new template for rendering. There are a few ways to achieve this, but well 


001 <g:applyLayout name=”homelayout”> 
002 


003 </g:applyLayout> 


Runapp 


Let’s run the application to ensure the new template is called for the 
home page view. Open the Grails Command Prompt window and enter 
run-app to compile the files and start the development server. Once complete, 
navigate to the URL where you should see the revised layout, including links 
to log in as an authenticated user. 


/ Social Security \ 

There are a number of Grails 
plug-ins built on top of the 
Spring Security Core 
authentication access plug-in 
that give you the ability to 
authenticate a user using a 
. number of popular social < 
\networking applications/ 
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Build a JavaScript app with Deferred objects 


Build a 

JavaScript app 
with Deferred 
objects 

Learn the usefulness of Deferred 
objects and how to utilise them in 
your own development projects 

tools I tecli I trends jQuery, Handlebars.js, HTML5 
expert Tim Stone 



O ver the last six years developers have 
become increasingly reliant on Ajax. 
This is no bad thing though; it allows 
us to create responsive interfaces 
and update data on the fly. This is all 
made better by jQuery’s fantastic 
jQuery.ajaxO method, which 
eliminates having to worry about 
browser quirks. Occasionally though, 
it would be useful to have even more flexibility. 

A Deferred object is a JavaScript object that will give 
you a returned value at some point in the future (a 
‘promise’). If you’re used to working with jQuery’s Ajax 
method then it’s the same as using the .doneO, .successO, 
and .errorO callbacks. Deferred objects add to this list 
with .resolved .rejectO and .thenO. There are others, but 
these three, and .whenO, are what we’re using here. 

Deferred objects are immensely useful when dealing 
with APIs or any asynchronous environment. This tutorial 
will give you an introduction on what they are, how to 
use them, and help you use them in your own projects. 

Today we’re going to build The Ultimate Dinosaur 
Encyclopaedia with a little help from Handlebars.js, a 
templating engine with a few tricks up its sleeve. 


01 The structure 


In the beginning there was HTML, and lo, it was good. So that’s where 
we’re going to start, with a barebones HTML page with all our JavaScript 
libraries included. We’ve also included HTML5 Boilerplate’s CSS files to give us 
a starting point. The main div’s contents will be replaced by the Handlebars 
templates when they’re rendered inside of it. 


001 <hl><a href="index.html">The Ultimate Dinosaur Encyclopaedia^ 
ax/hl> 

002 <section id="content”> 

003 </section> 

004 <script src=”js/libs/jquery. js”x/script> 

005 <script src=”js/libs/handlebars. js”x/script> 

006 <script src=”js/dino-loader. js”x/script> 


02 Building templates 


Before we get up close and personal with loading content we need to 
define how to structure the data. Lor the Encyclopaedia we’re going to show 
the user groups before anything else, and we’ve divided them into carnivores 
and herbivores. The {{}} syntax of Handlebars is used to interpolate JavaScript 
variables in the markup. The dot signifies this, eg this group. Also note the id 
attribute on script; we’ll use this to lock onto it with jQuery later on. 


001 <script id=”index" type="text/x-handlebars-template"> 

002 {{#each groups}} 

003 <h3><a class=”link" data-group="{{.}}">{{.}}s</a></h3> 

004 {{/each}} 

005 </script> 


Writing an API 

Deferred objects flourish when dealing with Ajax requests. If you’ve got 
a back-end that you’re dealing with, it’s good to wrap it in an API variable that 
has methods for each action, eg api.getDinosaursO;. As this is a front-end 


tutorial we’ll just be simulating a back-end response. Create a new file called 
dino-loader.js, this will house our logic. The full code for this step is located on 
the resource disc. 


Hooking in 

After the makeRequest function, we want to add a hook that will load 
our source for all things that stomp and roar. The dinosaurs.json file can be 
found on the resource disc which includes a JSON object as might be 
generated from a server. It includes each dinosaur’s name, description, image, 
and group. We’ll write hooks to get each part. 


001 function getDinosaurs() { 
002 if (!dinosaurs) { 


003 var url = ’js/dinosaurs.json’, 


request = makeRequest(url); 


004 

005 return request; 

006 } else { return dinosaurs; } 


7 } 

8 return { getDinosaurs: getDinosaurs }; 


OR No more nesting 


Now that we’ve got a list of all our dinosaur objects, we’re going to start 
by displaying each group that they belong to. At the moment, our limited 
dataset only includes carnivores and herbivores. getGroups will return each 
unique group in our dataset, but it depends on the presence of our dinosaurs’ 
variable already being populated. We could write it as a nested callback like: $. 
when(api.getDinosaurs()).then(function() {$.when(api.getGroups). 
then(function() {/*do stuff V}}); but as you can see that quickly gets messy! 
Instead we’re going to make getGroups a Deferred object that resolves when 
we’re sure it has the data. 


001 var getGroups = $.Deferred(function() { 
002 var deferred = this; 
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003 if (!dinosaurs) { 


004 $.when(getDinosaurs()).then(function() { 

005 filter(); 

006 }); 

007 } else { filter(); } 

008 }); 

Deferring and resolving 

In the last step we referred to a function called filterO, which we’ll write 
next. After we’ve done this, hopefully you’ll see how cool and useful Deferred 
objects are at returning values when they’ve been completed. In our 
getGroups method, it may have to make an Ajax request or simply filter some 
data but we only tell it to resolve when it’s complete. You can generally use 
resolveQ when you’d return something. 

001 function filter() 

002 { 

003 var groups = []; 

004 for (var i = 0; i < dinosaurs.dinosaurs.length; i++) { 

005 if (dinosaurs.dinosaursEi].group) groups.push(dinosaurs. 

dinosaursEi].group); 

006 } 

007 var sortedArray = Array.sort(groups), 

008 uniqueGroups = $.unique(sortedArray) ; 

009 deferred.resolve({ groups: uniqueGroups }); 

010 } 

When or then? 

Now that we’ve resolved the Deferred object that is getGroups we can 
use its resolved value to output the result. By using $.when() and $.then() we 
ensure that we have groups, while not explicitly having to lock onto any 
.successO callbacks; nor have we resorted to setTimeout or setlnterval. You 
can think of whenO as meaning ‘when this has been resolved’. 

001 $. when(api.getGroups).then(function(groups) { 

002 //render outcome 

003 }); 

Compiling our template 

Now that we have all our dinosaur groups, we can finally output this to 
the user. We do this by locking onto our Handlebars template with its id and 
then compile that template. We then replace our content section with the 
compiled template and pass it the data to use when rendering it. In this case, 
each group. 

001 //render outcome 

002 var source = $( '#index').html(), 

003 template = Handlebars.compile(source) ; 

004 $(’#content’).html(template(groups)) ; 


Adding click handlers 

Now that our template has been rendered into the DOM, we can 
manipulate it. Because this is a JavaScript app we’re going to have to cheat 
and manually assign click handlers to each link, which then gets each 
dinosaur that belongs to that group. Thankfully, jQuery makes this an absolute 
cinch to accomplish. 


The Ultimate Dinosaur Encyclopaedia 

Carnivores 


</\bove> 

• A list of the two main categories in our Encyclopaedia. Who knows, one day it might 
include omnivores too! 


Rendering out 

We’ve used the HTML5 custom data attribute to add some metadata 
to each anchor tag. We’re now going to use this to work out which group to 
get and then render in a similar fashion to what we’ve done before. We also 
need to write our Dinosaur Groups template and API hook to get the data, 
which we’ll accomplish next. The full code for this step is located on the 
resource disc. 


Compiling our template (2) 

First, our template. It’s much like the first time, but now we have an id 
of group. We’re also using the shorthand #array so instead of writing #each 
dinosaur it’s simply #dinosaur for brevity. We’re also wrapping the title in a 
Handlebars if statement so we can potentially reuse it later to list dinosaurs. 


001 <script id="list-dinosaurs" type=''text/x-handlebars-template”> 
002 {{#if group»<h2>{{group}}s</h2>{{/if}} 

003 {{#dinosaurs}} 

004 <h3><a class=''link" data-name="{{name}}'’>{{name}}</a></h3> 

005 {{/dinosaurs}} 

006 </script> 


Passing arguments 

With our template in place we can now think about giving it content. 
We’re going to add another method to our API called getGroupO and we’re 
going to pass it an argument. This is accomplished slightly differently to how 
our getGroups method worked. We wrap the Deferred object in an outer 
function that accepts an argument that we can then use in the Deferred 
object itself. The rest of the code is similar to what we’ve written above. 


001 var getGroup = function(group) { 

002 return $.Deferred(function() { 

003 var deferred = this; 

004 if (!dinosaurs) { 

005 $.when(getDinosaurs()).then(function() { filter(); }); 
006 } else { filter(); } 

007 }); 

008 }; 


Filtering groups 

Just as we did with getGroupsO, we filter the result and, once this is 
done, resolve the Deferred object with a list of all dinosaurs that belong to that 
group. So all carnivores will be listed when the user clicks Carnivores, and 
likewise for Herbivores. 


001 


002 


003 


$('.link’).each(function() { 

$(this).on('click', groupClickHandler); 

}); 


001 function filter() { 

002 var species = []; 

003 for (var i = 0; i < dinosaurs.dinosaurs.length; 
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species.push(dinosaurs.dinosaurs[i]); 


006 deferred.resolve({ dinosaurs: species, group: group 
}); 


007 } 


Applying click handlers 

The last thing to do is to write the click handler for dinosaurs, which in 
turn sets us up for the final leg of The Ultimate Dinosaur Encyclopaedia. Again, 
we get the name from the HTML5 data-* attribute and, when we have the data 
from getDinosaurO, use it to render the template. The full code for this step is 
located on the resource disc. 

Remember to return 

Now that we’ve glued all the bits together, you should be able to click 
on a group and immediately have a list of herbivores or carnivores presented 
to you - without any hard refresh and no nasty callback within callback within 
callback! Remember to return all API methods that we want to expose like so 
within the API variable. 

001 return { 

002 getDinosaurs : getDinosaurs, 

003 getDinosaur: getDinosaur, 

004 getGroups: getGroups, 


005 getGroup : getGroup 


006 }; 



The dinosaur template 

We’re going to show data related to the dinosaur that the user clicked. This 
calls for another template and another API hook. Again, we’ll start with the 
template. The following should look very familiar, but this time we’re not looping 
through anything, just giving it placeholders for the variables we’ll pass it. The full 
code for this step is located on the resource disc. 

Looking familiar 

You know the drill. Now we add a method to our API that will pass an 
argument (the dinosaur that was clicked on) and filter the result. 

001 var getDinosaur = function(dinosaur) { 

002 return $.Deferred(function() { 

003 var deferred = this; 

004 if (!dinosaurs) { 
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005 

$.when(getDinosaurs()).then(function() { 

006 

filter(); 

007 

}); 

008 

} else { filter(); } 

009 }); 

010 }; 


Error handling 

Once we’ve found a match in our source - where the name is the same 
as what the user clicked on - we resolve the Deferred object (getDinosaurO) 
immediately. Were also going to add our first error handler, so if no dinosaur 
was found and the deferred object hasn’t been resolved we reject the 
Deferred object by passing it some information that could be displayed to the 
user. The full code for this step is located on the resource disc. 


Adding fail 

Now that we’ve put in our first rejected Deferred object we may as well 
make use of it. Within dinosaurClickHandlerO we’re going to add a fail callback 
to $.when(), which will tell the user why it failed with an alerted message. 


001 $.when(api.getDinosaur(dinosaur)).then(function(dino) { 
002 //render template code 
003 }).fail(function(message) { 

004 alert(message.info); 

005 }); 


20 ALL the dinosaurs 


For the grand finale, we’re going to list all the dinosaurs in our JSON file. 
I’ve added a footer tag to the HTML page with an anchor tag that has an id of 
“all”, the contents of which say List all dinosaurs. We’ve also added some basic 
CSS to style anchor tags. 


001 <footer> 

002 <a id="all”>List all dinosaurs</a> 
003 </footer> 


Code reuse? Check 


We’re going to reuse the list-dinosaurs template. Remember we 
wrapped the Groups h2 in an if statement? That was so we can use it now. 
With this in place we can get an overview of all the dinosaurs in our source 
file. $.when() is handy here because it doesn’t matter if api.getDinosaursO 
returns a jQuery Ajax object or an array - it treats them the same. 


001 $(’#all’).on(’click’, function() { 

002 var source = $('#list-dinosaurs').html(), 

003 template = Handlebars.compile(source); 

004 $.when(api.getDinosaurs()).then(function(dinos) { 
005 $(’#content’).html(template(dinos)); 

006 $(’.link').each(function() { 

007 $(this).on('click', dinosaurClickHandler); 
008 }); 

009 }); 

010 }); 


And finally... 


With that, we’ve built a functional yet slightly barebones Ajax-reliant 


JavaScript app. It may not be The Ultimate Dinosaur Encyclopaedia, but it’s a 


good start! With any luck you now have a better understanding of Deferred 
objects in jQuery, and an example of when it’s useful to implement them. 


Code library 

To Defer or not to Defer? 

Here’s an overview of what the code should look like, complete with the API 
hooks and how to use them. 


As of jQuery version 1.5, 
all Ajax requests in 
jQuery are Deferred 
objects - so chances are 
you’ve already been 
using them. 


Resolve a Deferred 
where, traditionally, 
you’d return the result. 
Although not shown here 
make sure to reject (if 
necessary) too. 


By only returning certain 
functions we make sure 
that it can only make 
certain types of requests. 


Using $.when() and $. 
thenO can fast become 
habit and has an 
extremely memorable, 
semantic syntax. 


001 var api = (function() { 

002 var dinosaurs; 

003 function makeRequest(url) { 

004 

var request; 

005 

request = $.getJSON(url) 

006 

.success(function(response) { 

007 

dinosaurs = response; 

008 

return response; 

009 

}); 

010 

return request; 


011 function getDinosaurs() { 

012 

if (!dinosaurs) { 

013 

var url = 'js/dinosaurs.json’, 

014 

request = makeRequest(url); 

015 

return request; 

016 

} else { return dinosaurs; } 

017 

} 

018 

var getGroups = $.Deferred(function () { 

019 

var deferred = this; 

020 

if (!dinosaurs) { 

021 

$.when(getDinosaurs()).then(function() 

{ 

022 

filter(); 

023 

»; 

024 

} else { filter(); } 

025 

function filter() { 

026 

var groups = []; 

027 

for (var i = 0; i < dinosaurs. 

dinosaurs.length; i++) { 

028 

if (dinosaurs.dinosaurs[i].group) 

029 

groups.push(dinosaurs.dinosaurs[i]. 

group); 

030 

} 

031 

var sortedArray = Array.sort(groups), 

032 

uniqueGroups = $.unique(sortedArray); 

033 

deferred.resolve({ groups: uniqueGroups 

034 }); 

035 

> 

036 }); 


037 return { 

038 getDinosaurs : getDinosaurs, 
039 getGroups: getGroups 
040 }; 

041 })(); 


042 $.when(api.getGroups).then(function(groups) 


{ 

043 //work with groups 


044 }); 


tutorials. 


95 









































































HMTtfoliO 


Championing the talents of 


Melquiades Vazquez 

web www.iklem.com 



Currentrole Senior front-end developer 
Education MSc in computer science/ degree in computer 
science/degree in advertising and PR 
Expertise HTML5, CSS3, responsive design, JavaScript, jQuery, 
Flash, Photoshop, Fireworks, WordPress, Drupal, 
PHP, SQL 

Clients Adobe, Dell, Totaljobs Group, Young & Rubicam 
Twitter @melvc 


Born in Madrid, Melquiades Vazquez began 
his career as a back-end developer building 
.NET and Java websites. Drawing on his 
technical knowledge he moved into the world 
of front-end development in order to greater 
express his creativity and eye for good design. 

In 2009 he took the opportunity to move to 
London to broaden his development horizons 
and has spent the last three years working at a 
number of London’s top digital agencies. 

Melquiades combines his back-end and 
front-end skills to create WordPress, Drupal and 
eCommerce sites, as well as working on a range 
of online campaigns. 

He’s interested in recent web trends like 
responsive design, parallax effects and custom 
typographies, and likes to be involved in the 
entire process of creating a website; from the 


initial concept, through to launch and beyond. 
He thinks it’s important to understand all the 
steps in the creative process to make sure all of 
the pieces fit together. He says “knowing what’s 
possible (and what isn’t) is an essential part of 
development, so being involved in the design 
process as early as possible can help avoid 
problems further down the line”. 

He also partners with Cristiano Andrades, 
creative director of the design studio 
WEAREBOSSA to bring new concepts to life, 
offering development consultancy on the latest 
web technologies. 

Melquiades has just launched his new 
portfolio wwwJklem.com, and when he’s not 
cooking up some HTML5 magic, he enjoys 
cooking Spanish food and prasticing for the 
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cerveceriasantaana.com 


www.martinscosta.com 


01 

Melquiades’ recent portfolio is 
inspired by something both as 
simple and as difficult as a 50 x 
50px grid and utilises a fully 
responsive layout. 


02 

Tech.YR is a Young & Rubicam 
Group initiative. Smooth jQuery 
animations and easing effects 
seamlessly display the site’s 
additional content. 


03 

Digital agency site with a 
minimalist approach based on 
blocks of different sizes. The 
bold typography and colour 
scheme reflect quality. 


04 

A WordPress theme that uses 
responsive design and CSS3 
combined with several different 
backgrounds to add texture and 
depth of field. 


05 

A corporate site with random 
fullscreen background images 
related to their service. The site uses 
a dock animation in HTML5 canvas 
to switch between languages. 
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Sasha Endoh 

web www.sashaendoh.com 



Currentrole Freelance web designer 
Education Self taught 

Expertise Word Press, HTML, CSS, PHP, jQuery, Photoshop, 
Illustrator, Dreamweaver, WordPress CMS, 
responsive design 

Clients Childhood Disability LINK, Serge Dore Selections, 
International Coalition of Art Deco Societies 
Twitter @SashaEndoh 


Sasha Endoh is a WordPress web designer 
based in Montreal, Quebec, Canada. Raised 
by talented architects, Sasha saw her creative 
development start early on. Back then she was 
inspired by the paintings of Hans Memling and 
Hieronymus Bosch, and flowing art nouveau 
lines of Antoni Gaudi’s architectural style. 
Sasha is still drawn to classically inspired 
aesthetics but prefers a more modern 
approach. She loves thought-provoking 
juxtapositions, creative typography, and rich 
colour schemes. 

Even though Sasha built her first website at 
the age of 16, she had not considered web 
design as a career path until her mid-20s when 
she found herself without a job and with no 
interest in working for anyone other than 
herself. She had some rudimentary Photoshop 
skills and HTML knowledge as she dove head¬ 


first into absorbing and perfecting her new 
craft. Now, after more than five years of 
working as a freelancer Sasha is a passionate 
web designer with a deep-rooted appreciation 
for web standards, elegant code, and 
functional design. 

She is particularly excited about creating 
WordPress CMS websites that are not only 
beautiful but also easy to use for both their 
visitors and owners. She is fascinated by 
developing designs for responsive websites 
and finds the extra reguirement of making a 
website look and work great on multiple 
devices to be an invigorating challenge. 

Clearly, when Sasha sets her mind to doing 
something, she just ups and goes for it. Having 
challenges to fix along the way only makes 
the satisfaction of a job well done feel that 
little bit sweeter. 



Ol sergedoreselections.com 




fallinlove2012.com 
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www.olsavannah.com 




www.baqhdadilaw.com 
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01 

Deep accent colours, vintage 
framing and artisan fonts 
juxtaposed against white space 
create a modern look and feel for 
this wine importer’s website. 


02 

Autumnal wedding website for a 
couple marrying at a vineyard. 
Textured elements are 
reminiscent of rustic materials 
appropriate to the setting. 


03 

The bridal party page revealing 
the autumn-inspired tree design 
symbolises coming together 
and the connecting of branches 
of the family tree. 


04 

Folk/roots band website inspired 
by depression-era earth tone 
colours with sky-blue accents, a 
vintage font selection, and a 
photo background. 


05 

Responsive design offers 
on-the-go access to those seeking 
a criminal lawyer. A variation on a 
corporate colour scheme gives the 
site a unigue yet professional feel. 
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Web talent showcase 





www.torontobuskerffest.com 


www.dirtv-dishes.ca 


theultimatewomensexpo.com 


r. A 

www.wooffstock.ca 


Alvaro Ramos 

web www.alvaroramos.com 



Currentrole Network and computer systems analyst 
Education HTML, JavaScript jQuery, PHP. ASP, MySQL, Flash & 
Actionscript, CSS, Photoshop, Illustrator, Premiere 
Expertise Design, coding, plug-ins, WordPress, SEO, HTML5, 
CSS, JavaScript 

Clients Imagine Canada, Woofstock, Scotiabank Buskerfest, 
Epilepsy Toronto 
Twitter @AlvaroRamos_com 


Alvaro Ramos was born in A Coruna (Spain) in 
1978 and first had contact with computers 
when bought a Commodore 64 as a child. 

Fortunately, things have changed a little, but 
thanks to his creativity (and good humour when 
computers break down), he likes to think he is, 
somehow, respected in the world of web design. 

At 21, he cofounded his first company with a 
couple of university buddies, where he learned 
how to value team work and communication 
with clients. He was also working as an intern in 
the computers department in support of 
research of the University of A Coruna - first 
making coffee, and then building online-based 
systems to gather and process information for 
physics, biology or construction engineering 
researchers. Alvaro has been creating websites 
for more than ten years and still keeps his sanity 


and good humour even after having to deal daily 
with concepts like ‘browser compatibility’, ‘graphic 
resolution’ or ‘user-friendly interfaces’. 

“I like the expression ‘thinking out of the box,”’ 
he says, but at the same time he states he’s never 
gone into a box to think. Obsolete websites, 
templates, and non-user friendly contraptions 
flood the internet nowadays, limiting its real 
potential. He is determined to end this tyranny of 
tacky designs and structural nonsense by 
creating unigue, customised and visually 
appealing websites that are easy to navigate, and 
where information is simple, organised and, 
above all, relevant. 

An admirer and supporter of the open source 
concept, he considers that the internet should be 
a space where freedom of speech and creativity 
encounter no limits or obstacles. 



_ C*«>**1 

O! marigoldsandonions.com 


01 

A Flash-powered website that 
presents a fun, colourful and live 
experience - a true reflection of 
the event itself, which never 
ceases to excite or amaze. 


02 

Dedicated to a band of 
sharp-witted ladies who perform 
a blend of country bluegrass and 
gospel. The antigue feel of the 
site adds to the ambience. 


03 

A website perfect for dogs and 
their owners. The Flash splash 
screen uses animation to convey 
the spirit of hippydom, using a 
dressed-up dog. 


04 

An event takes places in multiple 
cities of the USA, so the challenge 
was to find a customised design 
that could be adaptable for 
different options. 


05 

A website built with Adobe Flash but 
including a host of CMS integrations. 
The client wanted a floating and 
clean design for this boutigue 
catering company. 
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Hong Kong 

See the design sights in the eastern city of lights 


I-Iong Kong is among the 
top-five most densely 
populated cities in the world. 
It’s exciting, fast-paced, and 
the financial hub of Asia. 
English-speaking digital 
creatives across a number of 
multi-disciplinary agencies 
thrive off and enjoy the 
energetic life on offer 
throughout the city 


H ong Kong became a special 

administrative region under China 
after the British handed back the colony in 
1997. It enjoys a high degree of autonomy 
and is one of the world’s leading international 
financial centres, characterized by capitalism, 
consumerism and economic competitiveness. 

Despite the Government’s effort in 
propelling the development of Hong Kong as 
Asia’s ‘design hub and creative capital’, the 
city has not guite gained a reputation as an 
area with a vibrant design scene. Picking a 
career in the creative industry is generally not 
considered a smart move by traditional 
Chinese parents, and the high cost of real 
estate is not helping new creative ventures 
that need affordable space. 

Typical digital projects in Hong Kong like 
websites, apps and other forms of online 
marketing are primarily driven by budgets 
and deadlines. Agencies, whether small or big, 
have to stay very competitive on price - and 
speculative work is the norm when working 
with big brand clients. 

Notwithstanding the fierce competition and 
long working hours, the digital design scene 
has gained stronger momentum and 
recognition thanks to the popularity of mobile 
devices, and Hong Kong is still one of the best 
places for pursuing a digital creative career in 
Asia for anyone that speaks English and 
enjoys a vibrant city life. 
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t BeansBox is a boutique digital agency that 
designs and builds attractive, easy-to-use 
and search engine friendly websites. With a 
focus on Drupal and search marketing, it 
specialises in creating multilingual, search 
engine-optimised websites using a powerful 
content management back-end for businesses in 
Hong Kong and abroad. 
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f PacificLink Group 

www.pacim.com 

As a full-service digital marketing agency, the work of the 
PacificLink Group is nothing if not diverse, including 
web-based assets and app development. With clients ranging from 
Volkswagen to Microsoft and Citi, the agency has constantly grown 
- opening offices in Shanghai and Taiwan. 


f pill& pillow 

www.pillandpillow.com 

Founded by Henry Chu back in 
2004, the breadth of work 
undertaken by this agency has attracted 
some seriously positive attention and 
many awards. Working with a diverse 
range of media, it’s clear that clients who 
want to push the creative aspects of their 
companies will find a great partner with 
pill & pillow. 


f GreenTomato 

www.qtomato.com 

As a specialist in the 
development of mobile apps 
for all the major platforms, this 
consultancy’s work has reached over 
three million users across a range of 
market sectors, from travel to 
banking. Clients looking to develop 
apps to engage with their customers 
trust GreenTomato consultancy to 
consistently deliver cutting edge 
mobile platforms, using the latest in 
tech trends and market research. 



Great coffee and sandwiches aside, this charming 
little cafe is a sanctuary for me to catch a breath in the 
sea of emails and deadlines. It’s tiny but never noisy or 
crowded during the week, and I love chatting with the 
owners who happen to be cat lovers too. 


In glitzy Hong Kong, it’s rare to find a down-to-earth 
outdoor bar for a cheap beer with a view. The Beer 
Bay is a tiny stall on the Central waterfront with a 
selection that belies its size. Grab a HK$30 draught 
beer, sit, and enjoy the view of Victoria Harbour. 


Just a 50 minute ferry ride from Hong Kong Island, 
Cheung Chau is the perfect place to relax after a 
long week and get away from the busy city. I love to 
enjoy the local seafood specialities and chill out on 
the beach there at night. 
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Let Web Designer unleash your creative side! 

Subscribe now and 




The only magazine you need to design and develop stunning websites 


Dreamweaver, XHTML & CSS 
¥ WordPress & microblogging 
¥ Photoshop & Illustrator 
¥ Flash & ActionScript 
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Our web-hosting guide is brought to you in association with 
Fasthosts, the UK’s leading reseller web-hosting provider 

•Unlimited websites • Use your own brand throughout 
•Unlimited bandwidth • 24/7 expert UK-based support 
•Unlimited web space • No-risk trial - 3 months free 


I Hosting listings 






Got a deal 
you think we 
should list? 


Whether you’re a hosting firm keen to promote your 
products or a happy customer who wants a favourite 
provider to be listed, drop us a line with the details! 

| webdesigner@imagine-publishing.co.uk 
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Keep an eye on the latest packages and 

deals with our comprehensive list of service providers 



l&i 


1&1 Internet Ltd. 

www.1and1.co.uk 


1&1 Starter (Linux) 0844 3351211 
1&1 Standard (Linux) 0844 3351211 
1&1 Standard (Windows) 0844 3351211 
1&1 Unlimited (Linux) 0844 3351211 
1&1 Unlimited (Windows) 0844 3351211 
1&1 Business (Linux) 0844 3351211 


£29.88 5GB Unlimited 1,000 / X / / / / / 

£59.88 50GB Unlimited 3,000 / / / / / / / 

£71.88 50GB Unlimited 3,000 / X / / / / / 

£83.88 Unlimited Unlimited 5,000 / / / / / / / 

£107.88 Unlimited Unlimited 5,000 / X / / / / / 

£119.88 Unlimited Unlimited Unlimited / / / / / / / 



1&1 Business (Windows) 

08443351211 

£155.88 

Unlimited 

Unlimited 

Unlimited 


X 

y 

y 

y 

y 

y 

X 




Unlimited Web Hosting Pack N/A 

£60 

Unlimited 

Unlimited 

Unlimited 

/ 

/ 

y 

y 

X 

y 

y 

X 

http://111webhOSt.com starter Web Hosting Pack 

N/A 

£30 

5GB 

2GB 

100 

/ 

/ 

y 

y 

X 

y 

y 

X 


Budget Web Hosting Pack 

: N/A 

£12 

1GB 

1GB 

5 

/ 

X 

y 

y 

X 

y 

y 

X 


WordPress Web Hosting Pack N/A 

£24 

5GB 

2GB 

100 

/ 

/ 

y 

y 

X 

y 

y 

X 


Drupal Web Hosting Pack 

: N/A 

£24 

5GB 

2GB 

100 

/ 

/ 

y 

y 

X 

y 

y 

X 


Joomla! Web Hosting Pack N/A 

£24 

5GB 

2GB 

100 

/ 

/ 

y 

y 

X 

y 

y 

X 


osCommerce Web Hosting Pack N/A 

£24 

5GB 

2GB 

100 

/ 

/ 

y 

y 

X 

y 

y 

X 


ZenCart Web Hosting Pack N/A 

£24 

5GB 

2GB 

100 

/ 

/ 

y 

y 

X 

y 

y 

X 


PrestaShop Web Hosting Pack N/A 

£24 

5GB 

2GB 

100 

/ 

/ 

y 

y 

X 

y 

y 

X 


123-reg (www.123-reg.co.uk) 

Starter 

0845 859 0018 

£29.88 

1GB 

5GB 

20 




y 

y 

y 

y 


123-reg (www.123-reg.co.uk) 

Plus 

0845 859 0018 

£59.88 

5GB 

50GB 

500 

/ 



y 

y 

y 

y 


123-reg (www.123-reg.co.uk) 

Pro 

0845 859 0018 

£107.88 

10GB 

100GB 

750 

/ 



y 

y 

y 

y 


123-reg (www.123-reg.co.uk) 

Bus Pro 

0845 859 0018 

£179.88 

20GB 

Unlimited 

1,000 

/ 



y 

y 

y 

y 


123-reg (www.123-reg.co.uk) 

Plus (MS) 

0845 859 0018 

£59.88 

2GB 

25GB 

100 

/ 



y 

y 

y 

y 


123-reg (www.123-reg.co.uk) 

Pro (MS) 

0845 859 0018 

£107.88 

5GB 

50GB 

500 

/ 



y 

y 

y 

y 


123-reg (www.123-reg.co.uk) 

Bus Pro (MS) 

0845 859 0018 

£179.88 

10GB 

150GB 

1,000 

/ 



y 

y 

y 

y 


2020Media (www.2020media.com) 

Light User 

0870 321 2020 

£45 

20MB 

1GB 

3 

/ 

y 

y 

y 

y 

y 

y 


2020Media (www.2020media.com) 

Everyday 

0870 321 2020 

£100 

200MB 

10GB 

15 

/ 

y 

y 

y 

y 

y 

y 


2020Media (www.2020media.com) 

Business/Pro 

0870 321 2020 

£275 

500MB 

20GB 

50 

y 

y 

y 

y 

y 

y 

y 


2020Media (www.2020media.com) 

JAVA Tomcat 

0870 321 2020 

£300 

100MB 

3GB 

15 

y 

y 

y 

y 

y 

y 

y 


2020Media (www.2020media.com) 

ASP.Net 

0870 321 2020 

£275 

100MB 

3GB 

15 

y 

y 

y 

y 

y 

y 

y 


4D Data Centres (www.4dhosting.com) 

Bronze Package 

08451668386 

£40 

10MB 

500MB 

2 

y 


y 

y 

y 

y 

y 


4D Data Centres (www.4dhosting.com) 

Silver Package 

08451668386 

£64.99 

20MB 

2GB 

10 

y 


y 

y 

y 

y 

y 


4D Data Centres (www.4dhosting.com) 

Gold Package 

08451668386 

£79.99 

50MB 

2GB 

50 

/ 


y 

y 

y 

y 

y 


4D Data Centres (www.4dhosting.com) 

Titanium Package 

08451668386 

£149.99 

500MB 

5GB 

500 

y 


y 

y 

y 

y 

y 

y 

4D Data Centres (www.4dhosting.com) 

Reseller Package 

08451668386 

£299.99 

1GB 

10GB 

1,000 

y 


y 

y 

y 

y 

y 

y 

Blackfoot Hosting Ltd (www.blackfoot.co.uk) 

Home 

N/A 

£40 

500MB 

5GB 

5 

y 

y 

y 

y 


y 

y 


Blackfoot Hosting Ltd (www.blackfoot.co.uk) 

Business 

N/A 

£50 

1GB 

20GB 

100 

y 

y 

y 

y 


y 

y 


Blackfoot Hosting Ltd (www.blackfoot.co.uk) 

eCommerce 

N/A 

£100 

2GB 

40GB 

200 

y 

y 

y 

y 


y 

y 


Blackfoot Hosting Ltd (www.blackfoot.co.uk) 

Professional 

N/A 

£150 

3GB 

60GB 

300 

y 

y 

y 

y 


y 

y 


Blacknight (www.blacknight.com) 

Minimus 

35359 918 3072 

£45 

10GB 

200GB 

Unlimited 

y 

y 

y 

y 

y 

y 

y 


Blacknight (www.blacknight.com) 

Medius 

35359 918 3072 

£79 

20GB 

400GB 

Unlimited 

y 

y 

y 

y 

y 

y 

y 


Blacknight (www.blacknight.com) 

Maximus 

35359 918 3072 

£45 

30GB 

600GB 

Unlimited 

y 

y 

y 

y 

y 

y 

y 


Bravo14 (http://bravo14.co.uk) 

Starter Linux 

N/A 

£130 

2,000MB 

2,000MB 

10 

y 

y 

y 

y 


y 

y 

y 

Bravo14 (http://bravo14.co.uk) 

Starter Windows 

N/A 

£20 

2,000MB 

2,000MB 

10 

y 

y 

y 

y 


y 

y 

y 

Bravo14 (http://bravo14.co.uk) 

Business Linux 

N/A 

£45 

4,000MB 

4,000MB 

4,000 

y 

y 

y 

y 


y 

y 

y 

Bravo14 (http://bravo14.co.uk) 

Business Windows 

N/A 

£45 

4,000MB 

4,000MB 

4,000 

y 

y 

y 

y 


y 

y 

y 

Bravo14 (http://bravo14.co.uk) 

Ultimate Linux 

N/A 

£60 

Unlimited 

Unlimited 

Unlimited 

y 

y 

y 

y 


y 

y 

y 

Bravo14 (http://bravo14.co.uk) 

Ultimate Windows 

N/A 

£60 

Unlimited 

Unlimited 

Unlimited 

y 

y 

y 

y 


y 

y 

y 

Daily Internet (www.daily.co.uk) 

Entry 

0845 466 2100 

£19.28 

500MB 

5GB 

75 

y 


y 


y 

y 

y 


Daily Internet (www.daily.co.uk) 

Home 

0845 466 2100 

£50.90 

3GB 

30GB 

30 

y 

y 

y 


y 

y 

y 


Daily Internet (www.daily.co.uk) 

Business 

0845 466 2100 

£53.94 

12GB 

150GB 

600 

y 

y 

y 


y 

y 

y 


Daily Internet (www.daily.co.uk) 

Business Plus 

0845 466 2100 

£77.94 

24GB 

250GB 

Unlimited 

y 

y 

y 


y 

y 

y 


Designwasp (http://designwasp.com) 

Starter 

0844 372 9848 

£30 

3GB 

20GB 

1,000 

y 

y 


y 


y 

y 


Designwasp (http://designwasp.com) 

Home 

0844 372 9848 

£40 

10GB 

50GB 

10,000 

y 

y 


y 


y 

y 


Designwasp (http://designwasp.com) 

Business 

0844 372 9848 

£60 

Unlimited 

Unlimited 

Unlimited 

y 

y 


y 


y 

y 
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Get your listing highlighted! Contact Richard 
© richard.rust@imagine-publishing.co.uk 
0+44(0)1202586436 hosting listings 




Featured host of the month: Blackfoot Hosting 


www.blackfoot.co.uk 



Offering more reasons for choosing one of the listed providers 

Blackfoot is an experienced UK-based web-hosting provider and first-class delivery. Hosting options are available in five flavours 
with a proven pedigree in offering hosting and domain name ranging from the entry-level Home solution for £40 per year, up to 
registration services since 1999. Specialising in Linux-based the powerful eCommerce, Professional and Partner packages priced 

servers, housed across three London data centres, Blackfoot promises between £100-200. All come with access to the feature-packed cPanel 

24/7 monitoring and a dedicated support team to guarantee uptime control panel for intuitive maintenance. 
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NAME AND URL 



Designwasp (http://designwasp.com) 

Windows Unlimited 

0844 372 9848 

£60 

Unlimited 

Unlimited 

Unlimited 

/ 

y 


y 


y 

y 


Designwasp (http://designwasp.com) 

Windows Home 

0844 372 9848 

£40 

10GB 

50GB 

1,000 

/ 

y 


y 


y 

y 


Designwasp (http://designwasp.com) 

CheapHost 

0844 372 9848 

£10 

300MB 

100MB 

5 




y 



y 


Digital Gibbon Ltd (http://digitalgibbon.com) 

Personal 

01865 589 990 

£12 

1GB 

Unlimited 

10 

/ 



y 

y 

y 

y 


Digital Gibbon Ltd (http://digitalgibbon.com) 

Personal Plus 

01865 589 990 

£48 

Unlimited 

Unlimited 

50 

/ 



y 

y 

y 

y 


Digital Gibbon Ltd (http://digitalgibbon.com) 

Business 

01865 589 990 

£108 

5GB 

Unlimited 

1000 

/ 

y 


y 

y 

y 

y 


Digital Gibbon Ltd (http://digitalgibbon.com) 

Business Professional 

01865 589 990 

£132 

Unlimited 

Unlimited 

Unlimited 

/ 

y 


y 

y 

y 

y 


Domaincheck (www.domaincheck.co.uk) 

Bronze Linux 

0191 2612252 

£30 

100MB 

1GB 

5 


y 

y 

y 

y 

y 

y 

y 

Domaincheck (www.domaincheck.co.uk) 

Gold Linux 

0191 2612252 

£100 

500MB 

5GB 

25 

/ 

y 

y 

y 

y 

y 

y 

y 

Domaincheck (www.domaincheck.co.uk) 

Bronze Windows 

01912612252 

£30 

100MB 

1GB 

5 


y 

y 

y 

y 

y 

y 

y 

Domaincheck (www.domaincheck.co.uk) 

Gold Windows 

0191 2612252 

£100 

500MB 

5GB 

25 

/ 

y 

y 

y 

y 

y 

y 

y 

Donhost (www.donhost.co.uk) 

Reseller Unix 

0845 226 5566 

£399.99 

Unlimited 

Unlimited 

Unlimited 

/ 


y 

y 

y 

y 

y 


Donhost (www.donhost.co.uk) 

Reseller Windows 

0845 226 5566 

£499.99 

Unlimited 

Unlimited 

Unlimited 

/ 


y 

y 

y 

y 

y 


Donhost (www.donhost.co.uk) 

Enterprise 

0845 226 5566 

£89.99 

1GB 

2GB 

250 

/ 


y 

y 

y 

y 

y 


Donhost (www.donhost.co.uk) 

Commerce 

0845 226 5566 

£179.99 

2GB 

5GB 

500 

/ 


y 

y 

y 

y 

y 


Donhost (www.donhost.co.uk) 

Designer 

0845 226 5566 

£119.99 

1GB 

2GB 

250 

/ 


y 

y 

y 

y 

y 


Donhost (www.donhost.co.uk) 

Developer 

0845 226 5566 

£259.99 

2GB 

5GB 

500 

y 


y 

y 

y 

y 

y 


eHosting (www.ehosting.com) 

Starter 

0844 999 4100 

£23.88 

1GB 

25GB 

10 






y 

y 

y 

eHosting (www.ehosting.com) 

Personal 

0844 999 4100 

£59.88 

2.5GB 

Unlimited 

50 

y 





y 

y 

y 

eHosting (www.ehosting.com) 

Expert 

0844 999 4100 

£95.88 

5GB 

Unlimited 

250 

y 





y 

y 

y 

eHosting (www.ehosting.com) 

Virtual 

0844 999 4100 

£227.88 

50GB 

Unlimited 

Unlimited 

y 




y 

y 

y 

y 

Equiphase (www.equiphase.net) 

Bronze 

0121 314 4865 

£30 

200MB 

2GB 

10 

y 

y 


y 


y 

y 

y 

Equiphase (www.equiphase.net) 

Silver 

0121 314 4865 

£42 

400MB 

5GB 

20 

y 

y 


y 


y 

y 

y 

Equiphase (www.equiphase.net) 

Gold 

0121 314 4865 

£72 

800MB 

10GB 

100 

y 

y 


y 


y 

y 

y 

Equiphase (www.equiphase.net) 

Platinum 

0121 314 4865 

£114 

1,200MB 

40GB 

200 

y 

y 

y 

y 

y 

y 

y 

y 

Eurofasthost.com (www.eurofasthost.com) 

Email Only 

02380 249 823 

£40 

1GB 

2GB 

10 



y 

y 

y 

y 

y 

y 

Eurofasthost.com (www.eurofasthost.com) 

Essential 

02380 249 823 

£75 

2GB 

5GB 

10 



y 

y 

y 

y 

y 

y 

Eurofasthost.com (www.eurofasthost.com) 

Superior 

02380 249 823 

£140 

5GB 

10GB 

25 

y 

y 

y 

y 

y 

y 

y 

y 

Eurofasthost.com (www.eurofasthost.com) 

Premium 

02380 249 823 

£250 

10GB 

25GB 

100 

y 

y 

y 

y 

y 

y 

y 

y 

Evohosting (www.evohosting.co.uk) 

Starter 

N/A 

£29.99 

500MB 

1GB 

3 

y 

y 

y 

y 


y 

y 

y 

Evohosting (www.evohosting.co.uk) 

Home 

N/A 

£54.99 

2.5GB 

30GB 

50 

y 

y 

y 

y 


y 

y 

y 

Evohosting (www.evohosting.co.uk) 

Business 

N/A 

£79.99 

6.5GB 

Unlimited 

Unlimited 

y 

y 

y 

y 


y 

y 

y 

Evohosting (www.evohosting.co.uk) 

eCommerce 

N/A 

£159.99 

30GB 

Unlimited 

Unlimited 

y 

y 

y 

y 


y 

y 

y 


Giacom (www.giacom.com) 

Business Pro 

0800 542 7500 

£199 

100MB 

2GB 

100 

/ 

y 

y 

/ 

y 

y 

y 

y 


Personal 

08081686777 

£32.87 

5GB 

Unlimited 

50 

/ 

X 

y 

/ 

y 

y 

y 

X 


Business Bronze 

08081686777 

£58.38 

50GB 

Unlimited 

500 

/ 

Option 

/ 

/ 

y 

y 

y 

X 


Business Silver 

08081686777 

£76.39 

Unlimited 

Unlimited 

Unlimited 

/ 

Option 

/ 

/ 

y 

y 

y 

X 

Fasthosts 

Business Gold 

08081686777 

£101.89 

Unlimited 

Unlimited 

Unlimited 

/ 

/ 

/ 

/ 

y 

y 

y 

X 

www.fasthosts.co.uk 

WD Starter 

0808168 6777 

£149.99 

20GB 

Unlimited 

Unlimited 

/ 

Option 

Option 

/ 

y 

y 

y 

X 


WD Advanced 

08081686777 

£199.99 

Unlimited 

Unlimited 

Unlimited 

/ 

Option 

Option 

/ 

y 

y 

y 

X 

Heart Internet (www.heartinternet.co.uk) 

Starter Professional 

0845 644 7750 

£29.80 

2.5GB 

10GB 

1,000 




/ 


y 

y 

/ 

Heart Internet (www.heartinternet.co.uk) 

Home Professional 

0845 644 7750 

£89.99 

10GB 

50GB 

10,000 

/ 

y 


/ 


y 

y 

/ 

Heart Internet (www.heartinternet.co.uk) 

Business Professional 

0845 644 7750 

£129.99 

Unlimited 

Unlimited 

Unlimited 

y 

y 


/ 


y 

y 

y 

Heart Internet (www.heartinternet.co.uk) 

Reseller Professional 

0845 644 7750 

£299.99 

Unlimited 

Unlimited 

Unlimited 

y 

y 


/ 


y 

y 

y 

Hostway (www.hostway.co.uk) 

Silver 

08081801880 

£79.50 

150MG 

3GB 

5 


Option 

y 

/ 


y 

y 


Hostway (www.hostway.co.uk) 

Gold 

08081801880 

£139.50 

300MB 

5GB 

10 

y 

Option 

y 

/ 

y 

y 

y 


Hostway (www.hostway.co.uk) 

Gold Plus 

08081801880 

£189.50 

450MB 

10GB 

30 

y 

Option 

y 

/ 

y 

y 

y 


Hostway (www.hostway.co.uk) 

Platinum 

08081801880 

£359.50 

600MB 

20GB 

50 

y 

Option 

y 

/ 

y 

y 

y 


Hostway (www.hostway.co.uk) 

Platinum Plus 

08081801880 

£599.50 

1.2GB 

40GB 

10 

y 

Option 

y 

/ 

y 

y 

y 


Hostway (www.hostway.co.uk) 

Email Plus 

08081801880 

£49.95 

50MB 

N/A 

5 

N/A 

N/A 

N/A 

/ 


y 

y 


ICUK www.icukhosting.co.uk 

Professional 

0845 009 9175 

£30 

250MB 

1GB 

50 

/ 

y 

option 

/ 

y 

y 

y 


ICUK www.icukhosting.co.uk 

Advanced 

0845 009 9175 

£50 

2GB 

2.5GB 

150 

/ 

y 

option 

/ 

y 

y 

y 


ICUK www.icukhosting.co.uk 

Enterprise 

0845 009 9175 

£80 

2GB 

500MB 

Unlimited 

/ 

y 

option 

/ 

y 

y 

y 


ICUK www.icukhosting.co.uk 

Professional Plus 

0845 009 9175 

£90 

500MB 

5GB 

100 

/ 

y 

option 

/ 

y 

y 

y 


ICUK www.icukhosting.co.uk 

Premium Plus 

0845 009 9175 

£150 

1GB 

12.5GB 

500 

y 

y 

option 

/ 

y 

y 

y 
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Our web-hosting guide is brought to you in association with 
Fasthosts, the UK’s leading reseller web-hosting provider 

•Unlimited websites • Use your own brand throughout 
• Unlimited bandwidth • 24/7 expert U K-based support 
•Unlimited web space • No-risk trial - 3 months free 

I Hosting listings 

Keep an eye on the latest packages 

and deals with our comprehensive list of service providers 



Discover what an enhanced 
listing can do for your 
business. Contact Richard on: 

©+44(0)1202586436 

Continued... 


NAME AND URL 


ICUK www.icukhosting.co.uk 

ICUK www.icukhosting.co.uk 

ICUK www.icukhosting.co.uk 

ICUK www.icukhosting.co.uk 

JAB Web Hosting (www.jabwebhosting.com) 

JAB Web Hosting (www.jabwebhosting.com) 

JAB Web Hosting (www.jabwebhosting.com) 

JAB Web Hosting (www.jabwebhosting.com) 

JAB Web Hosting (www.jabwebhosting.com) 

LCN (www.lcn.com) 

LCN (www.lcn.com) 

LCN (www.lcn.com) 

LCN (www.lcn.com) 

LCN (www.lcn.com) 

LCN (www.lcn.com) 

LD Hosts (http://ldhosts.co.uk) 

LD Hosts (http://ldhosts.co.uk) 

LD Hosts (http://ldhosts.co.uk) 

LD Hosts (http://ldhosts.co.uk) 

LD Hosts (http://ldhosts.co.uk) 

LD Hosts (http://ldhosts.co.uk) 

Media Temple (http://mediatemple.net) 



Enterprise Plus 
Reseller Windows 
Reseller Linux 
Reseller Enterprise 
Mail - M105 
Home - H25 
Professional - P55 
Reseller-R25 
Reseller-R105 
Blog 
Starter 
Starter 
Dynamic 
Premium 
Unlimited 
LD Budget (Linux) 

LD Home (Linux) 

LD Pro (Linux) 

LD Unlimited (Linux) 
Windows Home 
Windows Unlimited 
Shared-Server Pro 


0845 009 9175 

£300 

2GB 

20GB 

Unlimited 

/ 

y 

option 

/ 

/ 

y 

y 


0845 009 9175 

£200 

Unlimited 

Unlimited 

Unlimited 

/ 

y 

option 

/ 

/ 

y 

y 


0845 009 9175 

£200 

Unlimited 

Unlimited 

Unlimited 

/ 

y 

option 

/ 

/ 

y 

y 


0845 009 9175 

£500 

Unlimited 

Unlimited 

Unlimited 

/ 

y 

option 

/ 

/ 

y 

y 


0800 043 0153 

£15.17 

256MB 

3GB 

50 




/ 

/ 

y 

y 

y 

0800 043 0153 

£24.47 

1GB 

8GB 

50 

/ 



/ 

/ 

y 

y 

y 

0800 043 0153 

£45 

2GB 

15GB 

75 

/ 

y 


/ 

/ 

y 

y 

y 

0800 043 0153 

£97.88 

2GB 

30GB 

250 

/ 

y 


/ 

/ 

y 

y 

y 

0800 043 0153 

£271.60 

4GB 

Unlimited 

Unlimited 

/ 

y 


/ 

/ 

y 

y 

y 

01438 342 490 

£20 

100MB 

1GB 

5 



/ 

/ 

V 

y 

y 

y 

01438 342 490 

£30 

1GB 

1GB 

10 



/ 

/ 

y 

y 

y 

y 

01438 342 490 

£30 

1GB 

1GB 

10 



/ 

/ 

y 

y 

y 

y 

01438 342 490 

£50 

2GB 

2GB 

20 

/ 

y 

/ 

/ 

y 

y 

y 

y 

01438 342 490 

£80 

5GB 

5GB 

50 

/ 

y 

/ 

/ 

y 

y 

y 

y 

01438 342 490 

£120 

Unlimited 

Unlimited 

Unlimited 

/ 

y 

/ 

/ 

y 

y 

y 

y 

07891235858 

£11.88 

1GB 

1GB 

500 

/ 

y 


/ 

y 

y 

y 


07891235858 

£23.88 

10GB 

10GB 

5,000 

/ 

y 


/ 

y 

y 

y 


07891235858 

£41.88 

50GB 

50GB 

20,000 

/ 

y 


/ 

y 

y 

y 


07891235858 

£60 

Unlimited 

Unlimited 

Unlimited 

/ 

y 


/ 

y 

y 

y 


07891235858 

£17.88 

2GB 

2GB 

1,000 

/ 

y 


/ 

y 

y 

y 


07891235858 

£60 

Unlimited 

Unlimited 

Unlimited 

/ 

y 


/ 

y 

y 

y 


+1 310 841 5500 

£64 

2GB 

1TB 

1,000 

y 

y 

/ 

/ 

y 

y 

y 

y 


\\NameHOG e 

ff Affordable Internet Solutions 

NameHOG www.namehog.net 

EMAIL ONLY 

STARTER 

HOME PRO 

BUSINESS 

01604212 904 

01604212 904 

01604212 904 

01604212 904 

£11.99 

£36.99 

£59.99 

£109.99 

2.5GB 

10GB 

25GB 

Unlimited 

15GB 

150GB 

Unlimited 

Unlimited 

10 

Unlimited 

Unlimited 

Unlimited 

X 

X 

/ 

/ 

X 

X 

/ 

/ 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

y 

Namesco (www.names.co.uk) 

Startup Plus 

0845 363 3632 

£89.99 

500MB 

5GB 

10 

y 

y 

y 

y 

y 

y 

y 

y 

Namesco (www.names.co.uk) 

Business 

0845 363 3632 

£149.99 

2,000MB 

20GB 

100 



y 

y 

y 

y 

y 

y 

Namesco (www.names.co.uk) 

Business Plus 

0845 363 3632 

£89.99 

3,000MB 

30GB 

200 

y 

y 

y 

y 

y 

y 

y 

y 

Namesco (www.names.co.uk) 

Designer 

0845 363 3632 

£239.88 

1GB 

20GB 

200 

y 

y 

y 

y 

y 

y 

y 

y 

Namesco (www.names.co.uk) 

Designer Plus 

0845 363 3632 

£479.88 

Unlimited 

30GB 

Unlimited 

y 

y 

y 

y 

y 

y 

y 

y 


DEVELOPER 

0800 0612801 

£32.89 

1GB 

Unlimited 

500 

y 

y 

y 

y 

y 

y 

y 

y 

I J ■ wiHi—m 

ONE 

0800 0612801 

£109.99 

5GB 

Unlimited 

1000 

y 

y 

y 

y 

y 

y 

y 

y 


RESELLER 

0800 0612801 

£274.89 

Unlimited 

Unlimited 

1000 

y 

y 

y 

y 

y 

y 

y 

y 

Netcetera www.netcetera.co.uk 

VM500 Server 

0800 0612801 

£300 

20GB 

Unlimited 

Unlimited 

y 

y 

y 

y 

y 

y 

y 

y 


2200DC Server 

0800 0612801 

£720 

160GB 

Unlimited 

Unlimited 

y 

y 

y 

y 

y 

y 

y 

y 


3000DC Server 

0800 0612801 

£1,200 

2x500GB 

Unlimited 

Unlimited 

y 

y 

y 

y 

y 

y 

y 

y 


2600QC Server 

0800 0612801 

£1,800 

2x500GB 

Unlimited 

Unlimited 

y 

y 

y 

y 

y 

y 

y 

y 


Netplan (www.netplan.co.uk) 

Shared 100 

02071000 424 

£60 

100MB 

1GB 

5 

/ 

y 

y 

y 

y 

y 

y 

y 

Netplan (www.netplan.co.uk) 

VS100 

02071000 424 

£600 

5GB 

5GB 

5 

/ 

y 

y 

y 

y 

y 

y 

y 

Netplan (www.netplan.co.uk) 

VS200 

02071000 424 

£1,000 

10GB 

10GB 

10 

/ 

y 

y 

y 

y 

y 

y 

y 

Netplan (www.netplan.co.uk) 

VS300 

02071000 424 

£2,000 

15GB 

50GB 

20 

/ 

y 

y 

y 

y 

y 

y 

y 

Netplan (www.netplan.co.uk) 

Dedicated Servers 

02071000 424 

£3,000+ 

73GB+ 

1,500GB 

100+ 

/ 

y 

y 

y 

y 

y 

y 

y 

PurplePaw (www.purplepaw.co.uk) 

Email 

N/A 

£25 

100MB 

1GB 

10 



y 

y 


y 

y 


PurplePaw (www.purplepaw.co.uk) 

Play 

N/A 

£40 

100MB 

1GB 

10 



y 

y 


y 

y 


PurplePaw (www.purplepaw.co.uk) 

Plus 

N/A 

£65 

750MB 

5GB 

25 

y 

y 

y 

y 


y 

y 


PurplePaw (www.purplepaw.co.uk) 

Power 

N/A 

£95 

2GB 

10GB 

100 

y 

y 

y 

y 


y 

y 


PurplePaw (www.purplepaw.co.uk) 

R3 Reseller 

N/A 

£660 

10GB 

50GB 

Unlimited 

y 

y 

y 

y 


y 

y 


Reddex UK (www.reddexuk.com) 

Reddex Design Starter 

0843 289 4625 

£18 

1GB 

Unlimited 

10 

y 


y 

y 

y 

y 

y 

y 

Reddex UK (www.reddexuk.com) 

Reddex Design Business 

0843 289 4625 

£59.88 

10GB 

Unlimited 

100 

y 

y 

y 

y 

y 

y 

y 

y 

Reddex UK (www.reddexuk.com) 

Reddex Design Premium 

0843 289 4625 

£107.88 

100GB 

Unlimited 

Unlimited 

y 

y 

y 

y 

y 

y 

y 

y 

Skymarket (www.skymarket.co.uk) 

Standard 1 

0800 321 7788 

£49 

10MB 

2GB 

1 

y 


y 

y 

y 

y 

y 

y 

Skymarket (www.skymarket.co.uk) 

Standard 2 

0800 321 7788 

£69 

20MB 

2GB 

1 

y 


y 

y 

y 

y 

y 

y 
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Get your listing highlighted! Contact Richard 
© richard.rust@imagine-publishing.co.uk 
O +44 (0)1202586436 hosting listings 




Can you 
recommend 
your host? 


Tweet us today with your 
hosting comments and advice 

Q @WebDesignerMag 




NAME AND URL 


Skymarket (www.skymarket.co.uk) 
Skymarket (www.skymarket.co.uk) 

STRATO Hosting (www.strato-hosting.co.uk) 
STRATO Hosting (www.strato-hosting.co.uk) 
STRATO Hosting (www.strato-hosting.co.uk) 
STRATO Hosting (www.strato-hosting.co.uk) 
Streamline.net (www.streamline.net) 
Streamline.net (www.streamline.net) 
Streamline.net (www.streamline.net) 
Streamline.net (www.streamline.net) 
Streamline.net (www.streamline.net) 



Premium 1 
Premium 2 
STRATO BasicWeb 
STRATO PowerWeb 
STRATO AdvancedWeb 
STRATO EnterpriseWeb 
Trial (3 month) 

Starter 

Personal 

Plus 

Multisite 


0800 321 7788 
0800 321 7788 
00800 8007 0070 
00800 8007 0070 
00800 8007 0070 
00800 8007 0070 
0844 9411000 
0844 9411000 
0844 9411000 
0844 9411000 
0844 9411000 


Swish Hosting (www.swishhosting.co.uk) 

Email 

08445 67 69 71 

£18 


Unlimited 

Unlimited 



y 

y 

y 

y 

y 

y 

Swish Hosting (www.swishhosting.co.uk) 

Windows Hosting 

08445 67 69 71 

£66 


Unlimited 

Unlimited 

/ 

/ 

y 

y 

y 

y 

y 

y 

Swish Hosting (www.swishhosting.co.uk) 

Linux Hosting 

08445 67 69 71 

£66 


Unlimited 

Unlimited 

/ 

/ 

y 

y 

y 

y 

y 

y 

Swish Hosting (www.swishhosting.co.uk) 

eCommerce 

08445 67 69 71 

£90 


Unlimited 

Unlimited 

/ 

/ 

y 

y 

y 

y 

y 

y 

Swish Hosting (www.swishhosting.co.uk) 

SiteBuilder 

08445 67 69 71 

£12 


Unlimited 

Unlimited 

/ 

/ 

y 

y 

y 

y 

y 

y 

Switch Media (www.switchmedia.com) 

Switch Standard 

0151 236 9111 

£159 

1GB 

50GB 

500 

/ 




y 

y 



Switch Media (www.switchmedia.com) 

Switch Business 

0151 236 9111 

£249 

10GB 

150GB 

1500 

y 




y 

y 

y 


Switch Media (www.switchmedia.com) 

Business Pro 

0151 236 9111 

£348.96 

20GB 

300GB 

5000 

/ 




y 

y 

y 


thename.co.uk (www.thename.co.uk) 

Parking 

0870 765 6364 

£52.88 

25MB 

500MB 

15 

/ 

y 

y 

y 

y 

y 

y 


thename.co.uk (www.thename.co.uk) 

Forwarding 

0870 765 6364 

From £15 

N/A 

500MB 

N/A 



y 

y 

y 

y 

y 


thename.co.uk (www.thename.co.uk) 

Hosting 

0870 765 6364 

From £7.50 

N/A 

N/A 

N/A 




y 

y 

y 

y 


Tidy Web Hosting (www.tidywebhosting.co.uk) 

Entry 

0844 884 9100 

£25 

100MB 

1GB 

Unlimited 

/ 

y 

y 

y 

y 

y 

y 


Tidy Web Hosting (www.tidywebhosting.co.uk) 

Home 

0844 884 9100 

£50 

500MB 

5GB 

Unlimited 

/ 

y 

y 

y 

y 

y 

y 


Tidy Web Hosting (www.tidywebhosting.co.uk) 

HomePro 

0844 884 9100 

£100 

1GB 

10GB 

Unlimited 

/ 

y 

y 

y 

y 

y 

y 


Tidy Web Hosting (www.tidywebhosting.co.uk) 

Business 

0844 884 9100 

£150 

2GB 

20GB 

Unlimited 

✓ 

y 

y 

y 

y 

y 

y 


Tidy Web Hosting (www.tidywebhosting.co.uk) 

BusinessPro 

0844 884 9100 

£250 

5GB 

50GB 

Unlimited 

/ 

y 

y 

y 

y 

y 

y 


TwentyHost (www.twentyhost.co.uk) 

Basic5S 

0845 641 0776 

£24 

100MB 

1,500MB 

25 

/ 

y 

y 

y 

y 

y 

y 

y 

TwentyHost (www.twentyhost.co.uk) 

Standard5S 

0845 641 0776 

£45 

200MB 

3,000MB 

50 

✓ 

y 

y 

y 

y 

y 

y 

y 

TwentyHost (www.twentyhost.co.uk) 

Business5S 

0845 641 0776 

£70 

500MB 

7,500MB 

100 

y 

y 

y 

y 

y 

y 

y 

y 

TwentyHost (www.twentyhost.co.uk) 

Advanced5S 

0845 641 0776 

£110 

1,000MB 

15,000MB 

200 

/ 

y 

y 

y 

y 

y 

y 

y 

VARiHOST (www.varihost.net) 

WordPress Basic 

0208144 7057 

£47.88 

2GB 

10GB 

10 

/ 



y 

y 

y 

y 

y 

VARiHOST (www.varihost.net) 

WordPress Plus 

0208144 7057 

£71.88 

4GB 

100GB 

100 

/ 

y 


y 

y 

y 

y 

y 

VARiHOST (www.varihost.net) 

WordPress Extra 

0208144 7057 

£119.88 

unlimited 

Unlimited 

Unlimited 

/ 

y 


y 

y 

y 

y 

y 

WebFusion (www.webfusion.co.uk) 

Fusion Professional 

08451301602 

£107.40 

5GB 

50GB 

1,000 

/ 


y 

y 

y 

y 

y 


WebFusion (www.webfusion.co.uk) 

Fusion Business 

08451301602 

£179.40 

10GB 

150GB 

1,500 

/ 


y 

y 

y 

y 

y 


WebFusion (www.webfusion.co.uk) 

Fusion Developer 

08451301602 

£227.40 

20GB 

300GB 

5,000 

/ 


y 

y 

y 

y 

y 


WebFusion (www.webfusion.co.uk) 

Fusion Reseller 

08451301602 

£329.99 

Unlimited 

Unlimited 

Unlimited 

/ 


y 

y 

y 

y 

y 


Web Wiz (www.webwiz.co.uk) 

Windows Starter 

0844 3581450 

£69.95 

1GB 

25GB 

100 

/ 

y 

y 

y 

y 

y 

y 

y 

Web Wiz (www.webwiz.co.uk) 

Windows Professional 

0844 3581450 

£149.95 

4GB 

100GB 

500 

/ 

y 

y 

y 

y 

y 

y 

y 

Web Wiz (www.webwiz.co.uk) 

Windows Starter Reseller 

0844 3581450 

£199.95 

5GB 

25GB 

500 

/ 

y 

y 

y 

y 

y 

y 

y 


ll*. 

Bronze (Linux) 

08450589000 

£47.88 

2GB 

20GB 

10 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

X 


Silver (Linux) 

08450589000 

£95.88 

5GB 

50GB 

25 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

X 

: 

Gold (Linux) 

08450589000 

£143.88 

10GB 

100GB 

50 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

X 


Platinum (Linux) 

08450589000 

£239.88 

50GB 

250GB 

100 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

X 


Reseller (Linux) 

08450589000 

£479.88 

150GB 

500GB 

250 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

X 


Designer (Windows) 

08450589000 

£59.88 

2GB 

20GB 


/ 

X 

X 

/ 

/ 

/ 

/ 

X 

Zen Internet www.zen.co.uk 

Developer (Windows) 

08450589000 

£179.88 

10GB 

100GB 


/ 

X 

X 

/ 

/ 

/ 

/ 

X 


Golden rules to top hosting We identify and explain the key criteria for success... 


The best 

resources for you 

Selecting your ideal package is largely 
determined by the kinds of resources and quantity 
of features you require from your hosting solution. 
Key criteria like web space and monthly bandwidth 
are important for those services likely to be 
subjected to heavy amounts of traffic, which is 
why package solutions for enterprise applications 
are typically much more expensive. The general 
rule of thumb is not to buy more than you need or 
underestimate potential requirements... 


Competitive 
and reliable 

The hosting market is big business and 
hosting providers do try to drive prices down 
in a bid to entice your custom. Use our chart to 
compare costs, but be sure to visit the vendor 
websites to keep track of the latest deals, as 
they change. Remember that low price should 
not always be a deciding factor and that paying 
a premium for a more reliable, trusted and 
experienced vendor can offer you much better 
value for money in the long term. 


Putting you 
in control 

Modern hosting is all about giving 
customers the power to set up, monitor and 
maintain their web space with minimal fuss. Most 
commercial vendors offer access to award-winning 
and intuitive control panels that enable you to log 
in remotely and intuitively tweak your account, 
without the need to relay complicated instructions 
down the phone. Be sure to find out from your 
potential host as much as you can about the 
control panel and request a demo. 


Fantastic 
customer support 

If all else fails and you need some 
extra help to get your hosting back online, then 
a commitment to future customer support is key. 
Many vendors offer a service-level agreement 
which outlines what you can expect here, however 
most will be more explicit about whether phone 
support is included or email contact is preferred. 
Think about what you need for peace of mind and 
factor good, comprehensive technical support 
against the price. 
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THE ART OF 
RESPONSIVE DESIGN 



ESSENTIAL TOOLS & TECHNIQUES TO MEET THE 
DEMANDS OF THE MOBILE REVOLUTION 


THENEW 
TWITTER: DO 
YOU FOLLOW? 

Make sense of the new restrictions 



WEBAPPSFOR 

AMODERN 

WORKFLOW 

Discover why you need the Yeoman 
toolset to build beautiful web apps 


0 

PhoneGap 

BUILD MOBILE 
APPS WITH 
PHONEGAP 

Compile with Hydration and 
leverage the power of Git 


■ I 


1JJ— a ..xd Jj-.jjilix—, 

QflxiTKC JfKI CHJSKjn 

customer pxptrwcfts 
in ttw digital chnnrvel 



PROFILE: 

TEEHAN+LAX 

In 2002 Teehan + Lax were two men who 
thought they could do better (and do). We 
profile the agency that defines design and 
customer experiences in the digital age 


Visit the WEB DESIGNER online shop at 

for back issues, books and merchandise 


ALL IN YOUR LATEST 
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next month 
























Design for a better web 



Add creativity and flair to your online projects 
with an essential range of training products for 
hobbyists and professionals 

BookazinesL_^^^fl Back issues I 


!. , 

tf&jiHHfnLii 


SSSSmm" 1 ""** 


The, 




DVDs 


Web Design: From Desktop 
to Dotcom eMag Vol. 1 

A visual guide to Flash, 
Dreamweaver and Photoshop. 
256 pages of walkthroughs 
on one disc! A project-based 
workout for any webslinger! 
Master tools, receive technical 
advice and read inspirational 
features. 

£4.99 


v» 6 W 


Rips 


Web Design Vol. 6 

Creative guides for designing 
next-gen websites. In-depth 
features to bring you up 
to speed on all the hottest 
technologies. Step-by-step 
tutorials showing you how to 
design amazing websites. 
£14.99 


Web Design Tips, Tricks & 
Fixes Vol. 1 

Filled with in-depth tutorials 
and advanced techniques, 
This book is perfect for any 
web designer looking for 
inspiration for their next site 
design. 

£14.99 


Web Designer eMag Vol. 1 

Enjoy 21 issues of Web 
Designer on one interactive 
disc. Over 1800 pages 
of expert tutorials, case 
studies & features. Plus 
bonus tutorial workshop files 
included. 

£4.99 


The Web Design Book Vol. 1 

Bringing you up to speed with the new digital 
landscape, this book will give you a tour of 
the latest developments in web design and 
show you how to use these new tools to 
create a truly original site. 

£14.99 


Web Designer eMag Vol. 2 

A complete archive of Web 
Designer magazine issues 137- 
148. Over 824 pages of cutting- 
edge trends and techniques! 
Free - 256 page Web Design 
Vol. 03 bookazine included in 
pdf format. 

£4.99 


jQuer/ 


£13.99 

Web Designer 
DVDs from... 


Become an ImagineShop 
customer and leave reviews of 
your favourite products. 


Order online 


imagjneshop.co.uk 



IMAGINE 

PUBLISHING 


& @imagineshopuk 
n /imagineshopuk 


MAGAZINES 


BOOKS 


DVDS 


DOWNLOADS 


GIFTS 









designer 


Classified Advertising 


NOVEMBER OFFERS 

AT EXCEPTIONAL PRICES! 

1&1 DOMAINS 

SECURE YOUR DOMAIN AND SAVE! 



OFFER ENDS 

30/11/12 


Included with all 1&1 Domains: 

■ Subdomain creation and redirection 

■ Masked URL Forwarding 


TRUST THE UK's NO. 1 


With more than 11 million customer contracts, over £2 billion in 
annual turnover, 5000 employees, 18 million registered domains 
and 5 high-performance data centres, we are one of the world's 
largest web hosts and a leading domain registrar. 


y/ FULL DNS CONTR 


Complete DNS and Contact Management via our 
easy-to-use 1&1 Control Panel 


Check and register domains on-the-go 


24/7 phone and e-mail support 


DOMAINS E-MAIL WEB HOSTING eCOMMERCE SERVERS 

Call 0844 335 1211 or buy online 


www.1and1.co.uk 


Offers apply to first year of registration. Second year and subsequent years will be charged at the regular price. Visit www.landl.co.uk for full offer details, 
terms and conditions. Prices exclude VAT. 









Classified Advertising 


01202 586419 


*~COMPILA 

Web Hosting You Can Trust 


We Are Offering 
15% OFF Award 
Winning Hosting! 


0843 506 8902 
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Y 

y 

Y 

Y 


ITW§* we JwiI twnflflh yOU will Ci^Joy wrtffi Cijmplla hOsflrig: 


Flrsl class web hosting from a well respecied company 

Cwni'4j bui vokmi No. I h Lprmra H-jilrig. bjUy-'i Itoj.lFig. WiwJavH 
ilulfuti HtfiJlrrg grid fann*H HwAng iTDStgnrfM In I m EViJ<ri(jkhj\ W#t4vHl Iw 

AvwVdl. 

Comprehensive lechnical support avpIEpble 24/7 

Q*J ktchNc^impport tidflO m Yjftwrtyi errfritit+i -ti t*yww,. *in*a & TV. i W Crtfir, 

Free Google Adi Wor ds voucher 

Wo cHrot ol am «iJrrw nAhHncfi a rrtra Googla AdMnh 
voix;h^ worth Q0 £ 40 . 

lifetime gyoranie* 

We oiler u klrtlinin QtKrajitett ori many hirtllr-j i+jn 1 . -aivi 
am Hwi nnfy I IK wet twjtflnQi ramfmnp to ciI*cf If lit 



Corr*fjftS h o kxjriha w*b- PuMna company lhal hai bam ptoVkfog a cp. i aHy. 

■. i -•■ivi ■ |. i a^ra I nn b s\ ->*’ »- ■ . r k ■■• ■ j 

tr-nh. Wfl ara mw ejtvha vrat ttw charca la (ptn 1 a >tI n ifkickiI rari-i wrth a 
1 $Tt -dBcairfil i il-Tom nl snrW dv 


__ n’B A nlT 

value kx 

TO Cloirn yO^r 15% discounl simply call On 0843 506 &902 money! 


or visit www.compNo.cam/webdesigner 




3 Capture+ 

^ -frr»m DnrtrnHoA nwiHfhara 


from PostcodeAnywhere 

The Next Generation of International Address Finder 
optimise your checkout process with Capture+ 

The de-facto choice for address • 240+countries supported 
look-up, second to none . Auto . comp | eting addresses 

o Graze.com I • Find addresses on-the-move 


0800 047 0495 

www.postcodeanywhere.com/capture 


To Advertise In 


designer 


Contact Nick On 


01202 586419 


nick.marrow@imagine-publishing.co.uk 



Flexible technology 

today, tomorrow and the future 


Hosted 


technology, 

minus fcheadacnes 


Value for money 




% X, 


TOMORROW &THtFVn\Wt 


Whether you’re starting from scratch or a tech wizard, unreliable technology, 
limited product choice and a lack of support are all headaches you could do without. 

Fasthosts has been delivering industry-leading technologies, for thousands of customers 
just like you for over 13 years. 

With wholly-owned and managed secure UK data centres, dedicated 24/7 support 
and a team of experts, Fasthosts are always here, supporting you every step of the way. 

For help and advice call us now on 0800 6520 444 


WEB HOSTING ■ DOMAINS ■ EMAIL ■ DEDICATED SERVERS ■ VIRTUAL SERVERS ■ RESELLER HOSTING 



fasthosts.co.uk 

Making business work better online OF Cali 0800 6520 444 r H tli l^J 19 


















greatcflgitaliinags - The official download website of imagine Publtsi 


Magazines 


iPad iPhone Android phone Android tablet Apple Mac Windows PC 


3S0 Magazine 


3D Artis! 


HOME SUBSCRIPTIONS CONTACT US 


Shoot, edit & share bett 


eBooks Apps 






























Imagine digital editions 
are a new and exciting 
way to experience our 
world-leading magazines 


To get the most out of your digital 
editions, be sure to enjoy all of our 
fantastic features, including: 

• Zoomable text and pictures 

• In-app browsing 

• Searchable text 

u 


E|Advanced,*5^ ■ 

Photoshop 

t rtmusm at ***** S I JiKW i to 1 ■ 




[LEND 

►n a ni HAf* a a 

To buy more Imagine digital editions and for the 
latest issues and best offers, please go to 


www.GreatDigitalMags.com 


>ur favourite 
r you want 


No Disc. No Problem 


Many of the files you’re looking for can be 
found on the magazine’s website 























McLaren 


www.mclaren.com 

The Formula 1 racing legend is at the forefront of technology on the 
track. But has its website followed the same path? 


McLaren has been successful far longer than it 
has had a web presence, with the first site 
appearing around 1998. The first incarnation did 
little to reflect the success or brand of the 
company. In 2000, the website embraced the 
McLaren colours and brand along with a design 
that defined the technology of the time. At the 


turn of the century the design soon became 
dated, but it took until 2006 for changes to be 
made. Again, the site design was functional rather 
than glittering or inspiring. The site was still failing 
to represent McLaren, but in 2010 its design finally 
took a forward step with a style and technology 
worthy of the brand. 


# # In2000, the website embraced the 
McLaren brand along with a design that 
defined the technology of the time if 
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style relic: 
























































- # heart internet - 

The next step in the evolution of servers 

HYBRID SERVERS 



Bridging the gap 
between VPS and 
Dedicated Servers 


DEDICATED HARD DISK DRIVE 
USING HARDWARE RAID 

v m 


GUARANTEED RAM 





UK EXCLUSIVE 


LOW SERVER CONTENTION RATE 


■ U 


HYBRID SERVERS 


Using a combination of dedicated resources and 
virtualisation technology, Hybrid Servers provide 
increased performance, power & stability. 

Hybrid Servers are perfect for multi-site hosting, 
design and development platforms, database and 
email servers, ecommerce, media streaming, 
data storage, hosting clients' websites and more. 


DELL POWEREDGE R720XD SERIES 


From 


£59 


.99 per month 


FREE SSL 

CERTIFICATE 

WORTH 

£149 


% 


ZERO I/O SHARE 


UNLIMITED BANDWIDTH 



V 100% UK SUPPORT 24/7 


V FREE & INSTANT SETUP 


V 99.99% UPTIME SLA 


„ow 0845 644 7750 j|| heart internet 

Find out more www.heartinternet.co.uk/hybrid-servers www.heartinternet.co.uk 


Prices exclude VAT. 


Web hosting I Reseller hosting I VPS I Servers 



@ depositphotos 

YOUR ONE-STOP IMAGE SOLUTION 

YOU CAN BUY OUR PREMIUM PHOTOS 
FROM 50<t WITH OUR CREDIT SYSTEM, 

OR FOR AS LOW AS 10« WITH ONE OF 
OUR OUTSTANDING SUBSCRIPTION PLANS! 


























